CODEWITHSUNDEEP
javascriptarraysangularjs
Ryan.lay
Ryan.lay

Reputation: 1761

Angularjs map array to another 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?

Upvotes: 2

Views: 21083

Answers (4)

Andrew Clavin
Andrew Clavin

Reputation: 574

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.

Upvotes: 2

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

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

Upvotes: 6

Ryan Exlay
Ryan Exlay

Reputation: 361

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.

Upvotes: 0

tpie
tpie

Reputation: 6221

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>

Upvotes: 0

Related Questions