Angularjs map array to another array

Question

I have two arrays, Users and Employments like so:

Users       = [{id:1, name: \"ryan\"}, {id:2, name:\"Julie\"}]
Employment         


        

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

I dealt similar problem yesterday. If you want to use js, have to loop twice. I recommend to use the best way is to select in one query by join table if data come 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.