Angular working with two "interlinked" list of JSON objects

Question

Say I have the following JSON file

{
  "A": [
    {"name": "foo",
      "BRef": "123"
    },
    {"name": "Hello",
      "BRef": "456"
    }
  ],

  "B": [
    {"ID": "123",
      "lastName": "bar"
    },
    {
      "ID": "456",
      "lastName": "World"
    }
    ]
}

I have linked the model and view via the controller

$http.get('js/data.json')
    .success(function(data) {
      $scope.A = data.A;
      $scope.B = data.B;

How do I loop through A and dig out the lastname from B?

<div ng-repeat="a in A">
 <h1>{{a.name}} {{ <<(B.b.ID == a.BRef).lastname>> }}</h1>
</div>

Was thinking that an ng-repeat of B with an filter might do the trick.. but I'm not that skilled with angular filter (yet)

Hadi · Accepted Answer · 2016-04-24 09:58:52Z

1

you can use function for getLast name or use nested ng-repeat and use ng-if directive for display match item.

$scope.getLastName = function(BRef){
     var lastName = "";
      angular.forEach($scope.data.B,function(b){
         if(b.ID == BRef)
         lastName = b.lastName;
     });
     return lastName;
 }

in your view use

 <div ng-repeat="a in A">
  <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1>
</div>

var editer = angular.module('editer', []);
function myCtrl($scope) {
   $scope.data = {
  "A": [
    {"name": "foo",
      "BRef": "123"
    },
    {"name": "Hello",
      "BRef": "456"
    }
  ],

  "B": [
    {"ID": "123",
      "lastName": "bar"
    },
    {
      "ID": "456",
      "lastName": "World"
    }
    ]
}
   
   $scope.getLastName = function(BRef){
     var lastName = "";
      angular.forEach($scope.data.B,function(b){
         if(b.ID == BRef)
         lastName = b.lastName;
     });
     return lastName;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
   <div ng-repeat="a in data.A">
     <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1>
   </div>
  
  OR
  ----------------------------------
  
   <div ng-repeat="a in data.A">
     <h1>{{a.name}} <span ng-repeat="b in data.B" ng-if="b.ID == a.BRef">{{b.lastName}}</span></h1>
   </div>
 
</div>

edited Apr 24, 2016 at 9:58

answered Apr 24, 2016 at 9:43

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norfeldt Over a year ago

I really like the last solution since it can be applied more easy if I were to get other parameters than lastname

Norfeldt · Accepted Answer · 2016-04-24 10:02:04Z

1

From one of the post that was deleted I actually found an elegant solution by combinding it with the ng-show

<div ng-repeat="a in A">
<div ng-repeat="b in B" ng-show="b.ID == a.BRef">

 <h1>{{a.name}} {{b.lastname}}</h1>

</div>
</div>

answered Apr 24, 2016 at 10:02

Norfeldt

9,62025 gold badges112 silver badges175 bronze badges

Comments

Sourabh Munjal · Accepted Answer · 2016-04-24 10:00:13Z

0

I reckon SSH is right.

You can use filter method of javascript i.e

$scope.findCorrespondingLastName(bref) {
    $scope.B.filter(function(b) {
        return b.ID == bref;
    });
}

and in your html file use

 <div ng-repeat="a in A">
  <h1>{{a.name}} {{findCorrespondingLastName(a.BRef)[0]['lastName']}}</h1>
</div>

Also try to use controllerAs alias and put the variables on this of the controller. Using $scope is not recommended as per latest angular docs.

answered Apr 24, 2016 at 10:00

Sourabh Munjal

11 bronze badge

Collectives™ on Stack Overflow

Angular working with two "interlinked" list of JSON objects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related