Reputation: 21
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
Upvotes: 0
Views: 957
Reputation: 41455
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>
Upvotes: 0
Reputation: 150080
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)
Upvotes: 2