javascript - How to use ng-repeat in a nested json in an ionic project -

i'm trying use ng-repeat in nested json object.

{         "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"             }         ]     } 

i can list top level json (title, img, etc...), know how list comments part

<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 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> 

how can solve ?

the comments array has string , object. remove string "comments" , use array of objects. use ng-repeat="comment 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"      }   ] }