Angularjs: Filtering JSON - json

Question

The structure of the json response I have to work with is giving me all sorts of trouble.
I would like to filter children elements based on the entityType field.
For example I want only element of Folder type.
JSON:
{
"id" : "df1d2550-1442-41b8-9588-785e229c5728",
"path" : "",
"name" : "",
"entityType" : "Folder",
"children" : {
"child1" : {
"id" : "02427ae5-364e-47d0-8998-0876c596d586",
"name" : "child1",
"entityType" : "Book"
},
"child2" : {
"id" : "2bcef8b3-d3a3-410e-a481-a69ec7dce24d",
"name" : "child2",
"entityType" : "Letter"
},
"child3" : {
"id" : "12ee8334-d596-4b59-a09d-c286117f3966",
"name" : "child2",
"entityType" : "Book"
},
"Art" : {
"id" : "e3f2980e-433c-4eaa-b444-ed9702949ffc",
"name" : "Art",
"entityType" : "Folder"
},
"English" : {
"id" : "8fe0f14a-6f76-41aa-9ab3-3e63cd5a900b",
"name" : "English",
"entityType" : "Folder"
}
},
"properties" : { },
"ancestors" : [ ]
};
The JS code:
$scope.isFolder = function(item) {
return item.entityType === "Folder";
};
HTML
<div ng-repeat="item in library.children | filter:isFolder">
<pre>{{item.name}} - {{item.entityType}}</pre>
</div>
This code will display all the children when I only want 2.
Any idea what I am doing wrong ?
Plunker
Thanks

Answer 1

The reason your filter doesn't work is that Filter works on arrays but you have an object literal.
So you can either convert your object literal into an array like:
{
"id" : "df1d2550-1442-41b8-9588-785e229c5728",
"path" : "",
"name" : "",
"entityType" : "Folder",
"children" : [
{
"id" : "02427ae5-364e-47d0-8998-0876c596d586",
"name" : "child1",
"entityType" : "Book"
},
{
"id" : "2bcef8b3-d3a3-410e-a481-a69ec7dce24d",
"name" : "child2",
"entityType" : "Letter"
},
{
"id" : "12ee8334-d596-4b59-a09d-c286117f3966",
"name" : "child2",
"entityType" : "Book"
},
{
"id" : "e3f2980e-433c-4eaa-b444-ed9702949ffc",
"name" : "Art",
"entityType" : "Folder"
},
{
"id" : "8fe0f14a-6f76-41aa-9ab3-3e63cd5a900b",
"name" : "English",
"entityType" : "Folder"
}
],
"properties" : { },
"ancestors" : [ ]
};
You can use below code to convert children's properties to an array:
var arr = [];
for (var key in library.children) {
if (obj.hasOwnProperty(key)) {
obj[key]["key"] = key
arr.push(obj[key]);
}
};
library.children = arr;
Or create your own filter than takes in the object literal as callum linington do.

Answer 2

I went through the documentation. Although it is not as explicit as you would expect, looks like the filter function will only work on Array elements and not objects.
In your example, library.children is an object, not an array. Hence, the filter function is never called (which you can check by adding a console statement inside the function).
The specific part in the documentation which mentions that the filter function is called on Array can be found here. You will find it in the "Argument" section, "expression" row - look for the function description. It says that the function is called on Arrays and not Objects, which is your scenario.

Answer 3

So you can easily solve this by writing your own filter here is your adapted plnkr
Simple filter:
app.filter('byKey', function () {
return function (array, key, value) {
var take = [];
angular.forEach(array, function (e) {
if (e[key] === value){
take.push(e);
}
});
return take;
}
});
Simple usage:
<div ng-repeat="item in library.children | byKey: 'entityType' : 'Folder'">
<pre>{{item.name}} - {{item.entityType}}</pre>
</div>
The breakdown:
return function (input, arg1.....argn) {
}
The above return function in the filter is what drives the filter, the input is what you specify on the left side of the | (pipe), in your case: item in library.children.
It's the right side that confuses people. The first string should be the filter name, in my case byKey as that is what I have named it. Each time you use : you are allowing yourself to pass an arg.
So, I have specified this:
return function (array, key, value) {}
The first argument - array, is specified by the left of the |. The remaining args are specified each time you use :, in your case
byKey : 'entityType' : 'Folder'
byKey = filter, 'entityType' = key, 'Folder' = the value of the key