How to filter JSON data according to specified parameter AngularJS

Question

I have external JSON file call datas. This is the body of that JSON file.

[
    {"value": "1", "text": "aaa"},
    {"value": "2", "text": "bbb"},
    {"value": "3", "text": "ccc"},
    {"value": "4", "text": "ddd"},
    {"value": "5", "text": "eee"},
    {"value": "6", "text": "fff"},
    {"value": "7", "text": "ggg"},
    {"value": "8", "text": "hhh"},
    {"value": "9", "text": "iii"},
    {"value": "10", "text": "jjj"}
]

I want to filter data from this JSON file according to following array "b" values.(b0, b1, b3 etc)

$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}

Example:

This array have b0, b1, b2 and b3 those values are 1, 2, 5 and 7. Therefor I want to get only 1, 2, 5, 7 values arrays from datas JSON file and display text values of this array.

This array can be change with same format. Therefor I want to consider b+"number" parameters.

Example 1:

$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}

Example 2:

$scope.array = {"badge":"1,2,7","id":"0","b0":"1","b1":"2","b2":"7"}

Example 3:

$scope.array = {"badge":"1,2,5,7,8,9","id":"0","b0":"1","b1":"2","b2":"5","b3":"7","b4":"8","b5":"9"}

I get that JSON external file using angularjs like this,

$http.get("/json/datas.json").success(function(data) {
      $scope.datas= data;
});

Values are display using repeat.

<div ng-repeat="data in datas">
    <span ng-bind-html="data.text"></span>
</div>

Display HTML body only

aaa bbb eee ggg

nnnnnn · Accepted Answer · 2017-03-26 07:49:37Z

One way to do it is to filter, map, and/or reduce the array that has the "bX" values to create a lookup table of IDs, then filter the main data array based on that lookup table. Except that that "array" isn't an array, it is a plain object, so you can't use array methods on it directly. So I'm calling Object.keys() to get its keys in an array, and then I've chosen to use .reduce() to create the lookup table based on the keys that have the right format:

var data = [ {"value": "1", "text": "aaa"}, {"value": "2", "text": "bbb"}, {"value": "3", "text": "ccc"}, {"value": "4", "text": "ddd"}, {"value": "5", "text": "eee"}, {"value": "6", "text": "fff"}, {"value": "7", "text": "ggg"}, {"value": "8", "text": "hhh"}, {"value": "9", "text": "iii"}, {"value": "10", "text": "jjj"} ]

var $scope = {} // demo $scope object
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}

var bVals = Object.keys($scope.array).reduce(function(a, c) {
    if (/^b\d+$/.test(c))
      a[$scope.array[c]] = true
    return a
  }, {})
  
console.log(bVals)

var filteredData = data.filter(function(v) { return bVals[v.value] })

console.log(filteredData)

Wow, I can't believe I didn't notice that the badge property had the same information as the individual bX properties. That would've simplified my code. Oh well.
@Hey - Why? The code snippet in my answer can be run directly from this page, so you can see it works.

Sachila Ranawaka · Accepted Answer · 2017-03-26 07:51:20Z

You can use javascript prototype functions map and find to filter the data. First get the batch properties to an array and map the array to find the relevant values

$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o))

angular.module("app",[])
.controller("ctrl",function($scope,$sce){
$scope.datas = [
    {"value": "1", "text": "aaa"},
    {"value": "2", "text": "bbb"},
    {"value": "3", "text": "ccc"},
    {"value": "4", "text": "ddd"},
    {"value": "5", "text": "eee"},
    {"value": "6", "text": "fff"},
    {"value": "7", "text": "ggg"},
    {"value": "8", "text": "hhh"},
    {"value": "9", "text": "iii"},
    {"value": "10", "text": "jjj"}
]
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}

var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o)) 


console.log($scope.result)

$scope.trust = function(html){
 return $sce.trustAsHtml(html);
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="data in result">
    <span ng-bind-html="trust(data.text)"></span>
</div>
</div>

@Hey personally not a fan of a jsfiddle. created a plnkr though plnkr.co/edit/oag45U7BA2rQMxCIhirr?p=preview
Can you explane me o=> $scope.datas.find(k=> k.value == o) this. Why do you get o and k. Can we use any latter?
these are ES6 syntax for function references if you are using ES5 then use this $scope.result = batchArr.map(function(o) { return $scope.datas.find(function(k) { return k.value == ol }) })
map and find are prototype functions which iterates through a given array . o and k is the relevant object of that iterating array
o=> $scope.datas.find(k=> k.value == o) code is not working in EI

Collectives™ on Stack Overflow

How to filter JSON data according to specified parameter AngularJS

2 Answers 2

3 Comments

12 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

12 Comments

Related