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

Answer 1

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) 

Answer 2

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>