Как использовать ng-repeat во вложенном json в ионном проекте

Question

Как использовать ng-repeat во вложенном json в ионном проекте

0

Я пытаюсь использовать ng-repeat в вложенном объекте json.

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

Я могу перечислить верхний уровень json (название, img и т.д.), Но я знаю, как перечислить часть комментариев

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

Как я могу это решить?

vbotio 01 авг. 2016, в 19:37

Источник

0

это не должно быть "комментарий в card.comments"?
lossleader 01 авг. 2016, в 16:46
0

Да, я пробовал это до @lossleader, но не сработало.
vbotio 01 авг. 2016, в 16:51
0

Ваш первый комментарий также является «комментарием», который не соответствует выбранной вами структуре.
lossleader 01 авг. 2016, в 16:52

Показать ещё 1 комментарий

Теги:

javascript

jquery

ionic-framework

angularjs

json

1 ответ

Ещё вопросы

это не должно быть "комментарий в card.comments"?
Да, я пробовал это до @lossleader, но не сработало.
Ваш первый комментарий также является «комментарием», который не соответствует выбранной вами структуре.

Brandon G · Accepted Answer · 2016-08-01T15-25-00.000Z

Массив комментариев содержит строку и объект. Удалите строку "комментарии" и просто используйте массив объектов. Затем используйте 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"
     }
  ]
}

работал отлично! Спасибо вам большое!