Ani777 February 2016

Angular displaying data in a deep populated object

Html

<div ng-controller="topicController">
     <a href="#/dashboard">Dashboard</a> | <a href="#/topics">Topics</a> | <a href="#/users">Users</a>

    <h4>{{topic.user_name}} posted a topic</h4>

    <h2>{{topic.topic}}</h2>
    <h4>Description: {{topic.description}}</h4>
    <div ng-controller="postController">
        <label>Post Your Answer here</label>
            <form>
                <textarea name="post" ng-model="new_post.post"></textarea>
                <input type='submit' value='Submit' ng-click='addPost(users._id, topic._id, users.name)'>
            </form>

            <div ng-repeat="x in topic.posts">
                <h4>{{x.post}}</h4>
                <p>Likes:{{x.up_vote}} Dislikes:{{x.down_vote}}</p>
                <ul ng-repeat="i in topic.posts[x].comments">
                    <li>{{topic.posts[x].comments[i].comment}}</li>
                </ul>
                <div ng-controller="commentController">
                <form>
                        <textarea name="comment" ng-model="model.comment"></textarea><br>
                        <input type="submit" value="Submit" ng-click="addComment(users._id, x._id, users.name)">
                </form>
            </div>
        </div>
    </div>
</div>

As you can see in the image below, I have all the data popualted, the Topic Object, inside topic Posts, & inside posts Comments.

In my my html i can display the topic content & the posts properly, but having difficulty displaying the comments.

The comments are adding to DB but not showing. I have a ng-repeat to itterate through each comment of each post but its just not showing up. Attaching Image to display the entire object in my console.

Answers


GregL February 2016

You are misunderstanding what x represents inside your ng-repeat for the comments. x is the actual comment object - each item in the comments array on the post. So topic.posts[x] makes no sense. It should just be x.

So, obviously, rename it to comment, instead of x.

Bonus tip: always use track by with your ng-repeat expressions for performance reasons. In your case, it would be track by comment._id.


user2341963 February 2016

Your x is a post object, not an index. So your inner ng-repeat should be

<ul ng-repeat="c in x.comments">
    <li>{{c.comment}}</li>
</ul>

Post Status

Asked in February 2016
Viewed 2,220 times
Voted 5
Answered 2 times

Search




Leave an answer