CODEWITHSUNDEEP
arraysangularjsangularjs-ng-repeat
Ewald Bos
Ewald Bos

Reputation: 1770

AngularJS Nested ng-repeat that connects with the ID from two JSON arrays

I am trying to find the best way to connect two arrays together in i guess would be the nested ng-repeat. This is the data i have available (very short example);

GameGenre Table
ID    |    Genre
1     |    Action
2     |    First Person Shooter
3     |    Adventure

Game Table
ID    |    IDGenre   |  Name
1     |    1         |  SpiderMan
2     |    1         |  Batman
3     |    2         |  Wolfenstein
4     |    3         |  Just Cause
5     |    3         |  Tomb Raider
6     |    3         |  Indiana jones

So i am looking for the best way (a way / fasted way) to combine there two array together so i get this out

IDGameGenre 1 Holds: GAMEID1 and GameID2
IDGameGenre 2 Holds: GameID3
IDGameGenre 3 Holds: GameID4, GameID5, GAMEID6

this is what i come up with so far, i first consume the two arrays:

In the controller: 

 $http({
     method: 'Get',
     url: http://URL/api/GameGenre/All"
 })
     .success(function (data) {
          $scope.GameGenre= data;
     });

 $http({
     method: 'Get',
     url: http://URL/api/Game/All"
 })
     .success(function (data) {
          $scope.Game= data;
     });

 $scope.getTheGame = function(ID) {
     return Game.get({IDGenre: ID});
 };

In the HTML

<div class="listing" ng-repeat="Genre in GameGenre" ng-init='getTheGame(Genre.ID)'>
       <div class="Game" ng-repeat="Game in getTheGame"></div>
</div>

but i can't seem to get this two work, how would i be able to first consume the two arrays, add them both to a scope and then get the information sorted.

Upvotes: 0

Views: 101

Answers (2)

Fakhar Ahmad Rasul
Fakhar Ahmad Rasul

Reputation: 1691

or you can try something like:-

<ul>
    <li ng-repeat="Genre in GameGenre">{{ Genre.Name }}</li>
    <ul>
        <li ng-repeat="Game in GameArray" ng-if="Game.GenreId == Genre.Id">{{ Game.Name }}</li>
    </ul>
</ul>

Upvotes: 2

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

Firstly your $http requests are asynchronous. You need to either chain them, or resolve synchronously, which can be done with $q.all(). Then, once resolved and populated into arrays, you can manipulate them and create a new array for your table. I found 2 for loops to be the simplest way of doing it (good luck making it shorter with .map/.reduce/etc.).

Here is a static example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $q) {
  /*
  var GGpromise = $http(...).then(function (res) {
    return res.data;
  });
  var Gpromise = $http(...).then(function (res) {
    return res.data;
  });
    
  $q.all([GGpromise, Gpromise]).then(function(res){
    var GG = res...;
    var G = res...;
  }).finally(function(){
    // main code here:
    // ...
  })
  */
  
  var GG = [
    {"ID":1,"Genre":"Action"},
    {"ID":2,"Genre":"First Person Shooter"},
    {"ID":3,"Genre":"Adventure"}
  ];
  var G = [
    {"ID":1,"IDGenre":1,"Name":"Spider Man"},
    {"ID":2,"IDGenre":1,"Name":"Batman"},
    {"ID":3,"IDGenre":2,"Name":"Wolfenstein"},
    {"ID":4,"IDGenre":3,"Name":"Just Cause"},
    {"ID":5,"IDGenre":3,"Name":"Tomb Raider"},
    {"ID":6,"IDGenre":3,"Name":"Indiana Jones"}
  ];

  $scope.games = [];
  for (var i = 0; i < GG.length; i++) {
    var temp = {};
    temp.IDGameGenre = GG[i].ID;
    temp.Holds = [];
    for (var j = 0; j < G.length; j++) {
      if (GG[i].ID == G[j].IDGenre) {
        temp.Holds.push(G[j].ID);
      }
    }
    $scope.games.push(temp);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <pre>{{games | json}}</pre>
</div>

Upvotes: 2

Related Questions