AngularJS ng-repeat with different objects

Question

I'm new to AngularJS and have written an app which calls an specific API. It gets an object back like this:

posts = [
    posts = [...]
    users = [...]
]

That's the HTML template:

<div id="{{'post-' + $index}}" ng-repeat="post in posts.posts">
    <article>
       <h1>{{post.user.username}}</h1>
       <span>{{post.date | date: "dd.MM.yy, HH:mm"}}</span>
       <p>{{post.content}}</p>
    </article>
</div>

I want to show different posts (from the posts object) including the username (which is in the users object). How can I tell Angular that the posts are in the posts object and the proper usernames are in the users object?

What does a post look like? Are the posts and user arrays mapped 1-to-1? — Michael Banzon
– Michael Banzon, Commented Jul 14, 2014 at 20:26
Looks to me like the data you are returning should be formatted better. The way it is now you assume there is a 1 to 1 relationship. if that is the case then you should be able to put them both in the same object. — Delta
– Delta, Commented Jul 14, 2014 at 20:26

Reactgular · Accepted Answer · 2014-07-14 20:32:42Z

1

ngRepeat creates a new scope for each entry. That scope will contain $index for the current offset in the array. Since it's a new scope the variable posts is now in the $parent scope.

Assuming posts and users contain parallel data and are arrays. You can lookup data in users using $index.

<h1>{{$parent.posts.users[$index].username}}</h1>`

answered Jul 14, 2014 at 20:32

Reactgular

55.1k24 gold badges174 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dave · Accepted Answer · 2014-07-14 20:30:40Z

Without seeing the structure of the posts and users object, it's hard to say exactly, but the general idea is to use the users object, with the user_id from the post object, so either something like this:

<h1>{{users[post.user.id].username}}</h1>

Or like this:

<h1>{{getUserNameForPost(post)}}</h1>

$scope.getUserNameForPost = function(post) {
     //find the user based of the post however you want
     user = $scope.users.filter(function(u) { return u.id = post.user });
     return user[0].username;
}

bentesha · Accepted Answer · 2014-07-14 20:54:34Z

0

If possible, I would suggest you change the structure of the returned JSON object, to something similar to the one below:

posts = [
    { 
    id : "post id",
    title: "Post title",
    content: "Post content",
    date : "post date",
    user : {
        id: "user id",
        name: "user name"
        }
    },
    ....
    ....
]

This should work.

answered Jul 14, 2014 at 20:54

bentesha

9489 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat with different objects

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related