I have two arrays, Users and Employments like so:

Users       = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]

I'd like to display the Employments array in an ng-repeat like so:

<li ng-repeat="employment in Employments">
  {{employment.user.name}}
</li>

How do I map the Users array to the Employments array?

I have two arrays, Users and Employments like so:

Users       = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]

I'd like to display the Employments array in an ng-repeat like so:

<li ng-repeat="employment in Employments">
  {{employment.user.name}}
</li>

How do I map the Users array to the Employments array?

• javascript
• arrays
• angularjs

• 1 try this stackoverflow./questions/14647694/… – ramamoorthy_villi Commented May 5, 2015 at 4:11

4 Answers 4

If you want the employee name to get displayed based on id, the simplest way is just pass that id to a function and return the name, like as shown below

Working Demo

html

<div ng-app='myApp' ng-controller="ArrayController">
    <li ng-repeat="employment in Employments">{{getEmployeeName(employment.user_id)}}
    </li>
</div>

script

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.Users = [{
        id: 1,
        name: "ryan"
    }, {
        id: 2,
        name: "Julie"
    }];

    $scope.Employments = [{
        user_id: 1,
        title: "manager"
    }, {
        user_id: 2,
        title: "Professor"
    }];

    $scope.getEmployeeName = function (empId) {
        for (var i = 0; i < $scope.Users.length; i++) {
            if ($scope.Users[i].id === empId) {
                return $scope.Users[i].name;
            }
        };
    };
});

UPDATE 2

If you want to embed the User array in the Employments array, try the following stuff

$scope.Users = [{id: 1, name: "ryan"}, {id: 2, name: "Julie"}];

$scope.Employments = [{user_id: 1, title: "manager"}, 
                      {user_id: 2, title: "Professor"}
                     ];

code for flattening Employments array by adding User properties

angular.forEach($scope.Users, function (user, userIndex) {
    angular.forEach($scope.Employments, function (employee, employeeIndex) {
        if (employee.user_id === user.id) {
            employee.name = user.name;
        }
    });
});

Output

$scope.Employments = [ { user_id: 1, title: "manager", name: "ryan" }, 
                       { user_id: 2, title: "Professor", name: "Julie" } 
                     ]

Working Demo

UPDATE 3

Code for making a nested employee structure like as shown below from $scope.Users and $scope.Employments

$scope.employees = [];
angular.forEach($scope.Employments, function (employee, employeeIndex) {
    var employeeObject = {};
    employeeObject.title = employee.title;
    angular.forEach($scope.Users, function (user, userIndex) {
        if (employee.user_id === user.id) {
            employeeObject.user = user;
        }
    });
    $scope.employees.push(employeeObject);
});

Output

[ { title: "manager", user: { "id": 1, "name": "ryan" } }, 
  { title: "Professor", user: { "id": 2, "name": "Julie" } } 
]

Working Demo

If you wanted to match up the two following arrays purely with a template you could take the following arrays

Users       = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]

And nest a repeat like:

    <li ng-repeat="employment in Employments">
      <div ng-repeat="user in Users" ng-if="user.id === employment.user_id" >
        {{user.name}}:{{employment.title}}
      </div>
    </li>

Two more nice little thing to do to avoid any risk of getting those brackets showing on a slow page load is to use the ng-bind and prefix the attributes with data so its with the html spec

        <li data-ng-repeat="employment in Employments">
          <div data-ng-repeat="user in Users" data-ng-if="user.id === employment.user_id" >
            <span data-ng-bind="user.name"></span>:<span data-ng-bind="employment.title"></span>
          </div>
        </li>

I know you didn't have the need for anything but the name, but figured a quick example of using the outer loop in the inner still could be helpful. Also this would be the case for ng-init if you needed to reference the the $index of the outer ng-repeat from the inner, but that might be more than you're looking for here.

Plunker

This sorts the users names into the employments array:

var sortUsers = function() {
  var i = 0;
  for (i; i < $scope.users.length; i++) {
    console.log($scope.users[i].id)
    for(var z = 0; z < $scope.employments.length; z++) {
      if($scope.employments[z].user_id === $scope.users[i].id) {
        $scope.employments[z].name = $scope.users[i].name;    
      }
    } 
  }
}

HTML:

<ul>
      <li ng-repeat="employment in employments">
  {{employment.name}}
      </li>
</ul>

I dealt similar problem yesterday. If you want to use js, have to loop twice. I remend to use the best way is to select in one query by join table if data e from single database.

You select User by one query, and Employment for another query in database. Then, twice ng-repeat to re-arrange. Here is my solution.

select users.*, employments.title from `users` inner join `employments` where users.id = employments.user_id; 

Hope be be helpful.