Eucar Eucar - 3 months ago 25
AngularJS Question

AngularJS - Custom filter for multidimensional array

As you can see below is my JSON formatted data file.

You also can see that there's a root object called servers which contains two arrays.

There's another array within this array called players.

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"
}
]}


On my website I'm loading this file from an extern URL using http from Angular (local for temp).

To show players from array [0] and [1] I'm using concat to mix them.

$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;
});


Here's my loop where I list this 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>


On my website I have four checkboxes.


  • Server 1 (Unchecked should not list array [0])

  • Server 2 (Unchecked should not list array [1])

  • Players (Unchecked should not list admin: false)

  • Admins (Unchecked should not list admin: true)





<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


I don't know how to do this. I tried to create a custom filter, but didn't work.

Or if you know a better way please post it here.

VSO VSO
Answer

Either I don't understand the question, or you are going about it the wrong way. You can't POSSIBLY filter by server on an array that doesn't know what server the players came from (vm.players). If you want to concat the arrays, assign each player the server they came from beforehand. Then simply filter by the new player.serverNumber property:

        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;

And here is your html with some changes. Try out the new filter:

   <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

Comments