Q:

Mixing 2 json to in 1 . How ? ( AngularJS )

Get 2 json files from backend , and need to mix it !
First ng-repeat:
<p ng-repeat="category in categories track by category.id" >
  {{ category }}
</p>

result
{"id":"Category-1"}
{"id":"Category-2"}
{"id":"Category-3"}

Second ng-repeat:
<p ng-repeat="game in gamesList track by game.id">
  {{ game }}
</p>

result
{"Category-id":"1","title":"Game-1"}
{"Category-id":"1","title":"Game-2"}
{"Category-id":"2","title":"Game-3"}
{"Category-id":"3","title":"Game-4"}
{"Category-id":"3","title":"Game-5"}

I need to mix this 2 values and get something like this:
Category-1

Game-1
Game-2

Category-2

Game-3

Category-3

Game-4
Game-5

A:

You do not have to mix both json, you can just use the 2nd json and use GroupBy Filter
DEMO

angular.module('datepickerBasicUsage', ['angular.filter'])
.controller('AppCtrl', function ($scope) {
   $scope.gamesList  = [{"Categoryid":"1","title":"Game-1"},
{"Categoryid":"1","title":"Game-2"},
{"Categoryid":"2","title":"Game-3"},
{"Categoryid":"3","title":"Game-4"},
{"Categoryid":"3","title":"Game-5"}];
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
  <ul ng-repeat="(key, value) in gamesList | groupBy: 'Categoryid'">
  <h3> Category: {{ key }} </h3>
  <li ng-repeat="player in value">
     {{ player.title }} 
  </li>
</ul>
   </div>
  </body>
</html>

