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.

Here embed.plnkr.co/5iZk3f4jyZk3K6i8ebbp Make the window bigger to see the side panel. It's responsive. — Engin
– Engin, Commented Sep 2, 2016 at 18:42

davidwickman · Accepted Answer · 2016-09-02 20:18:01Z

2

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

answered Sep 2, 2016 at 20:18

davidwickman

3381 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

VSO Over a year ago

Good stuff guys. I like this solution.

Engin Over a year ago

Can you also make one little thing? The place where it shows Online Players (AMOUNT) should be based on filtered items.

VSO Over a year ago

stackoverflow.com/questions/15316363/… Edit: Actually, it's not that simple because you have multiple filters...

davidwickman Over a year ago

check updated plunker. you need to create a cnrFilterObjects object on the fly and then we can use cnrFilterObjects.length to get the length of the current filtered items. this should work for checkboxes and search.

davidwickman Over a year ago

is this what you were looking for @Eucar?

VSO · Accepted Answer · 2016-09-02 19:54:32Z

1

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

edited Sep 2, 2016 at 19:54

answered Sep 2, 2016 at 19:47

VSO

12.8k28 gold badges119 silver badges203 bronze badges

7 Comments

Engin Over a year ago

Thanks, can you also show an example for filter? Should I rename the checkboxes like vm.serverNumber or smth like this?

VSO Over a year ago

Hey, I just added the filter for you. I recommend the checkbox simply triggering the filter. Define the filter value just like the other filter in a $scope.vm var and then toggle it when checkbox is checked/unchecked. I didn't see your checkboxes in the plunk. Let me know if you need more help.

Engin Over a year ago

I mean the filter should work based on checkboxes. When server 1 is checked it should list only serverNumber: 1 and when server 1 and server 2 are checked. It should list serverNumber: 1 and serverNumber: 2

Engin Over a year ago

I'll give you rep and mark as correct answer. You really helped me. It would be better if you'd also do that with checkboxes, but thanks anyway.

VSO Over a year ago

david got it =)

|

Collectives™ on Stack Overflow

AngularJS - Custom filter for multidimensional array

2 Answers 2

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related