Wie man ng-repeat in einem verschachtelten JSON in einem ionischen Projekt verwendet

Question

Ich versuche ng-repeat in einem verschachtelten JSON-Objekt zu verwenden.

{ 
     "title": "Important message 01", 
     "img": "any url image here", 
     "authorPhoto": "http://lorempixel.com/40/40/people/4/", 
     "author": "John Doe", 
     "datePosted": "1 day ago", 
     "thumbsUp": "245", 
     "thumbsDown": "200", 
     "commentsNum": "123", 
     "id": "1", 
     "comments": [ 
      "comment", 
      { 
       "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/", 
       "author": "Jimmy doe", 
       "text": "useless commment", 
       "dateCommented": "01/08/2016" 
      } 
     ] 
    } 

Ich kann die Top-Level-json Liste (Titel, img, etc ...), aber ich weiß, wie man die Kommentare Teil zur Liste

<ion-item ng-repeat="card in cards" href="#/app/playlists/{{card.id}}" class="card-wrapper"> 
     <div class="card" style="background: url({{card.img}}); background-size:100%;"> 
      <div class="inner-wrapper"> 
       <img ng-src="{{card.authorPhoto}}" alt="Author profile photo"> 
       <p class="author">{{card.author}} <br> 
            {{card.datePosted}} 
       </p> 
       <p class="essay">{{card.title}}</p> 
       <div class="footWrapper"> 
        <div class="thumbsUp"><i class="icon ion-arrow-up-c"></i>{{card.thumbsUp}}</div> 
        <div class="comments">{{card.commentsNum}}</div> 
        <div class="thumbsDown"><i class="icon ion-arrow-down-c"></i>{{card.thumbsDown}}</div> 
       </div> 
      </div> 
     </div> 
     <div class="commentsWrapper"> 
      <div class="head"> 
       <img class="profilePhoto" src="http://tilomitra.com/wp-content/uploads/2014/08/avatar-cartoon.png" alt="avatar photo"> 
       <input type="text" placeholder="Write a comment..."> 
      </div> 
      <div class="commentsContainer"> 
       <ul> 
        <li ng-repeat="comment in cards.comments"> 
         {{comment.authorCommentPhoto}} <br> 
         {{comment.author}} <br> 
         {{comment.text}} <br> 
         {{comment.dateCommented}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    </ion-item> 

Wie kann ich dieses Problem lösen?

Answer 1

Das Array Kommentare enthält eine Zeichenfolge und ein Objekt. Entfernen Sie die Zeichenfolge "Kommentare" und verwenden Sie einfach ein Array von Objekten. Dann benutze ng-repeat = "Kommentar in card.comments"

{ 
    "comments":[ 
    { 
       "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/", 
       "author": "Jimmy doe", 
       "text": "useless commment 1", 
       "dateCommented": "01/08/2016" 
    }, 
    { 
       "authorCommentPhoto": "http://lorempixel.com/40/40/people/5/", 
       "author": "Jimmy doe", 
       "text": "useless commment 2", 
       "dateCommented": "01/09/2016" 
    } 
    ] 
}