Link two objects in angular

Question

I've got 2 data sets

posts

[
 {
  "postId": 1,
  "postContent": "Lorem Ipsum",
  "user": 1
 },
 {
  "postId": 2,
  "postContent": "Lorem Ipsum",
  "user": 2
 },
]

and users

[
 {
  "user": 1,
  "firstName": "John",
  "lastName": "Doe"
 },
 {
  "user": 2,
  "firstName": "Johny",
  "lastName": "Doey"
 }
]

I am repeating all the posts and i would like to access a user data throught the $scope.post.user.firstName etc.

how should i aproach it?

@MathieudeLorimier i am using $resource directive and i've tried to do something like $scope.post.user = user.get({id: $post.user}) also i have found out about .merge() and .extend() functions via google search, but i've decided to ask before implementig one of them — EDGECRUSHER
– EDGECRUSHER, Commented Dec 2, 2016 at 16:13
@MasoodRehman to access user data in a way that is like accessing nested json — EDGECRUSHER
– EDGECRUSHER, Commented Dec 2, 2016 at 16:15

Yosvel Quintero · Accepted Answer · 2016-12-02 16:26:49Z

You can implement a method like getUserById() with the use of Array.prototype.find() to use it when iterating over your posts.

Code in AngularJS:

angular
  .module('App', [])
  .controller('AppController', ['$scope', function ($scope) {
    $scope.posts = [{"postId": 1,"postContent": "Lorem Ipsum","user": 1},{"postId": 2,"postContent": "Lorem Ipsum","user": 2}];
    $scope.users = [{"user": 1,  "firstName": "John",  "lastName": "Doe"},{  "user": 2,  "firstName": "Johny",  "lastName": "Doey"}];

    $scope.getUserById = function (id) {
      return $scope.users.find(function (user) {
        return id === user.user;
      });
    };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<div ng-app="App" ng-controller="AppController" class="row">
  <div ng-repeat="p in posts">
    <p>{{p.postContent}} <i>by {{getUserById(p.user).firstName}}</i></p>
  </div>
</div>

TimoStaudinger · Accepted Answer · 2016-12-02 16:27:06Z

2

find() the matching user for each post.

Note that if you are not using ES6 features, you will need a polyfill for Object.assign() and should use regular function() {}s instead array functions.

var posts = [{"postId":1,"postContent":"LoremIpsum","user":1},{"postId":2,"postContent":"LoremIpsum","user":2}];
var users = [{"user":1,"firstName":"John","lastName":"Doe"},{"user":2,"firstName":"Johny","lastName":"Doey"}];

var out = posts.map(post => Object.assign({}, post, {
  user: users.find(user => user.user === post.user)
}));
                
console.log(out);

edited Dec 2, 2016 at 16:27

answered Dec 2, 2016 at 16:17

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

Comments

Buddhika Herath · Accepted Answer · 2016-12-02 16:35:48Z

0

You can create a function that maps each user object to your post object. Then you can access user details as $scope.post.user.first_name; Here is simple code that will make you an new object with users.

var new_object = [];
function mapUsersToPosts(users, posts){
   angular.forEach(posts, function(post){
      angular.forEach(users, function(user){
         if(post.user_id == user.user_id){
            new_object.push({
                'post' : post,
                'user' : user
            });
         }
      });
   });
}

Now you can loop new_object and use user data and post data in same object.

answered Dec 2, 2016 at 16:35

Buddhika Herath

333 bronze badges

Collectives™ on Stack Overflow

Link two objects in angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related