AngularJS - Пользовательский фильтр для многомерного массива

Question

Как вы можете видеть ниже, это мой файл данных формата JSON.

Вы также можете увидеть, что есть объект root, называемый серверами, который содержит два массива.

В этом массиве есть еще один массив: игроков.

data.json

{ "servers" : [ { "age" : 44, 
     "mapname" : "Las Venturas", 
     "num" : 1, 
     "online" : true, 
     "players" : [ { "admin" : false, 
      "cop" : true, 
      "id" : 2, 
      "level" : 10, 
      "name" : "MariusTudor77", 
      "registered" : true, 
      "since_connect" : 3545, 
      "skill" : "Police Officer", 
      "spawned" : true 
      }, 
      { "admin" : false, 
      "cop" : false, 
      "id" : 3, 
      "level" : 0, 
      "name" : "bananasinpajamas", 
      "registered" : true, 
      "since_connect" : 6726, 
      "skill" : "Hitman", 
      "spawned" : true 
      }, 
      { "admin" : false, 
      "cop" : false, 
      "id" : 4, 
      "level" : 0, 
      "name" : "Milka2005Hewew", 
      "registered" : false, 
      "since_connect" : 177, 
      "skill" : "Pick Pocket", 
      "spawned" : true 
      } 
     ], 
     "worldtime" : "11:00" 
    }, 
    { "age" : 44, 
     "mapname" : "Los Santos", 
     "num" : 2, 
     "online" : true, 
     "players" : [ { "admin" : false, 
      "cop" : false, 
      "id" : 0, 
      "level" : 0, 
      "name" : "[_tayyab_]", 
      "registered" : true, 
      "since_connect" : 4063, 
      "skill" : "Car Jacker", 
      "spawned" : true 
      }, 
      { "admin" : false, 
      "cop" : false, 
      "id" : 2, 
      "level" : 10, 
      "name" : "furkan", 
      "registered" : false, 
      "since_connect" : 1750, 
      "skill" : "Mechanic", 
      "spawned" : true 
      } 
     ], 
     "worldtime" : "11:00" 
    } 
]} 

На моем сайте я загружаю этот файл из экстерна URL с помощью HTTP из угловых (локальной для температуры).

Чтобы показать игроков из массива [0] и [1], я использую concat для их смешивания.

$http.get("api/players.php") 
    .then(function (res) { 

     vm.s1 = res.data.servers[0]; 
     vm.s2 = res.data.servers[1]; 

     vm.players = vm.s1.players.concat(vm.s2.players); 

     vm.loading = false; 
    }); 

Вот моя петля, где я перечисляю этот vm.players.

<li ng-if="vm.players.length" ng-repeat="player in vm.players | filter: search | orderBy: 'name'"> 
    <a href="#">{{ player.name }} ({{ player.id }})</a> 
</li> 

На моем сайте у меня есть четыре галочки.

• Сервер 1 (Переполнение не должно перечислить массив [0])
• Сервер 2 (Переполнение не должно перечислить массив [1])
• Игроков (Переполнение не должно перечислить админ: ложный)
• Админ (Переполнение не должны перечислить админа: истинный)

<input type="checkbox" ng-model="vm.checkbox.s1"> Server 1 
<input type="checkbox" ng-model="vm.checkbox.s2"> Server 2 
<input type="checkbox" ng-model="vm.checkbox.player"> Players 
<input type="checkbox" ng-model="vm.checkbox.admin"> Admins 

Я не знаю, как это сделать. Я попытался создать собственный фильтр, но не работал.

Или, если вы знаете лучший способ, разместите его здесь.

Answer 1

Я с @VSO, вам нужно будет добавить сервер к объекту игрока для фильтрации на сервере.

Я добавил это свойство сервера к объектам игрока, а затем создал собственный фильтр для ваших требований. Это определенно работает, но это не супер красиво, но должно дать вам хорошее представление о том, как структурировать вещи для настраиваемого фильтра для управления данными.

Позвольте мне знать, если у вас есть какие-либо вопросы :)

https://embed.plnkr.co/2cY7ZGHiDaazjeafESMI/

Я повернулся на server1, сервере2, админ, и игрок по умолчанию. Вы можете настроить это в следующем объекте:

$scope.cnrFilterObj = { 
    admin: true, 
    players: true, 
    server1: true, 
    server2: true 
}; 

Answer 2

Либо я не понимаю вопроса, либо вы идете по нему не так. Вы не можете POSSIBLY фильтровать по серверу в массиве, который не знает, из какого сервера пришли игроки (vm.players). Если вы хотите согласовать массивы, назначьте каждому игроку сервер, из которого они пришли, заранее. Тогда просто фильтр нового player.serverNumber собственности:

 vm.s1 = res.data.servers[0]; 
     vm.s2 = res.data.servers[1]; 

     vm.s1.players.forEach(function (player) { 
      player.serverNumber = 1; 
     }); 

     vm.s2.players.forEach(function (player) { 
      player.serverNumber = 2; 
     }); 

     vm.players = vm.s1.players.concat(vm.s2.players); 

     vm.loading = false; 

А вот ваш HTML с некоторыми изменениями. Попробуйте новый фильтр:

<li ng-if="vm.players.length" ng-repeat="player in vm.players | filter: search | filter:{ serverNumber: 1}:true" | orderBy: 'name'"> 
       <a ng-click="vm.userInfo(player.name)" href="#" ng-if="player.admin" class="admin-icon">{{ player.name }} ({{ player.id }})</a> 
       <a ng-click="vm.userInfo(player.name)" href="#" ng-if="!player.admin">{{ player.name }} ({{ player.id }}) ({{ player.serverNumber }})</a> 
      </li> 

PLUNK