CODEWITHSUNDEEP
javascriptangularjshtmlangularjs-scope
ak85
ak85

Reputation: 4264

Find object by id using another object's id property from array of objects with ng-repeat

I have the below data model in my scope.

        $scope.staff = [
        {"id": "1","name": "Alex"},
        {"id": "2","name": "Brad"},
        {"id": "3","name": "Cam"}
    ];
        $scope.closedShop =[
            {"day": "monday","staffID": "1"},
            {"day": "wednesday","staffID": "2"},
            {"day": "thursday","staffID": "3"},
            {"day": "friday","staffID": "1"}
        ];

What I want to do is output which staff member closed the shop each day, so based on the above my ideal output would be.

Alex closed the shop on monday

Brad closed the shop on wednesday

Cam closed the shop on thursday

Alex closed the shop on friday

The problem I am having is the closedShop data only contains staffID, how can I look this up based on the staff.id data to get the persons name?

I have a working example below however, this is not a scalable solution, for more than a handful of staff?

  'use strict';
    var app = angular.module('app', []);
        app.controller('MainCtrl', ['$scope', function ($scope) {
            $scope.staff = [
            {"id": "1","name": "Alex"},
            {"id": "2","name": "Brad"},
            {"id": "3","name": "Cam"}
        ];
            $scope.closedShop =[
                {"day": "monday","staffID": "1"},
                {"day": "wednesday","staffID": "2"},
                {"day": "thursday","staffID": "3"},
                {"day": "friday","staffID": "1"}
            ];
        }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div ng-repeat="closed in closedShop">
            <span ng-if="staff[0].id==closed.staffID">{{staff[0].name}}</span> 
            <span ng-if="staff[1].id==closed.staffID">{{staff[1].name}}</span> 
            <span ng-if="staff[2].id==closed.staffID">{{staff[2].name}}</span> 
            closed the shop on {{closed.day}}
            </div>
    </div>
</div>

What is the best way to get this working?

Upvotes: 0

Views: 1953

Answers (3)

m59
m59

Reputation: 43755

This part is the money: 

<span ng-init="person = (staff | filter:{id:closed.staffID}:true)[0]">{{person.name}}</span>

It's probably self-explanatory, but I'll elaborate in case it helps.

  • You want to display properties of an individual staff member, so I would start with {{person.name}}.
  • Then, we'll need to get a variable person, so we'll need to use ng-init to create that.
  • We need to filter the array of staff to one member, so we filter that down by closed.staffID, using the "strict" parameter set to true so that we only get results where the id matches. This section needs to be wrapped in ( ) because of the filtering syntax.
  • Finally, we use [0] so that person is set to the matching object, which will be the first item in the array (item 0). 

    var app = angular.module('app', []);
        app.controller('MainCtrl', ['$scope', function ($scope) {
            $scope.staff = [
            {"id": "1","name": "Alex"},
            {"id": "2","name": "Brad"},
            {"id": "3","name": "Cam"}
        ];
            $scope.closedShop =[
                {"day": "monday","staffID": "1"},
                {"day": "wednesday","staffID": "2"},
                {"day": "thursday","staffID": "3"},
                {"day": "friday","staffID": "1"}
            ];
        }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div ng-repeat="closed in closedShop">
            <span ng-init="person = (staff | filter:{id:closed.staffID}:true)[0]">{{person.name}}</span>
            closed the shop on {{closed.day}}
        </div>
    </div>
</div>

You could also do ng-init="person = getPerson(closed.staffID)" and move the filtering logic into the controller. To do that, you'll inject the filter filter (funny name), like this:

app.controller('MainCtrl', ['$scope', 'filterFilter', function ($scope, filter) {

and then use this function:

$scope.getPerson = function(id) {
  return filter($scope.staff, {id:id}, true)[0];
};

Upvotes: 4

Vikash
Vikash

Reputation: 1141

May be this is not what you expect but does the job properly :

HTML :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
    <div ng-repeat="closed in closedShop">

        <span ng-repeat="s in staff" ng-if="s.id==closed.staffID">
          {{s.name}}
        </span>
        closed the shop on {{closed.day}}
        </div>
</div>
</div>
<script src="app.js"></script>

JS:

 var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.staff = [
        {"id": "1","name": "Alex"},
        {"id": "2","name": "Brad"},
        {"id": "3","name": "Cam"}
    ];
        $scope.closedShop =[
            {"day": "monday","staffID": "1"},
            {"day": "wednesday","staffID": "2"},
            {"day": "thursday","staffID": "3"},
            {"day": "friday","staffID": "1"}
        ];
    }]);

See this plunkr

Upvotes: 1

Bartosz Czerwonka
Bartosz Czerwonka

Reputation: 1651

You can add to your controller function to get staffById.

$scope.getStaff = function(id){find and return}

and change your view:

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div ng-repeat="closed in closedShop">
            <span>{{getStaff(closed.staffID)}}</span> 
            closed the shop on {{closed.day}}
            </div>
    </div>
</div>

Upvotes: 2

Related Questions