AngularJS - Custom filter for multidimensional array

Question

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.

Answer 1

I'm with @VSO, you will need to add the server to the player object to filter on the server.

I added this server property to the player objects and then created a custom filter for your requirements. It definitely works, but it's not super pretty, but should give you a good idea of how to structure things for a custom filter for manipulating data.

Let me know if you have any questions :)

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

I turned on server1, server2, admin, and player by default. You can adjust this in the following object:

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