[英]How to filter JSON data according to specified parameter AngularJS
我有外部JSON文件调用数据。 这是该JSON文件的正文。
[
{"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"}
]
我想根据以下数组“ b”值从此JSON文件过滤数据。(b0,b1,b3等)
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}
例:
该数组具有b0,b1,b2和b3,这些值分别是1、2、5和7。因此,我想从数据JSON文件中仅获取1、2、5、7值数组,并显示该数组的文本值。
可以使用相同的格式更改此数组。 因此,我想考虑b +“ number”参数。
范例1:
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
范例2:
$scope.array = {"badge":"1,2,7","id":"0","b0":"1","b1":"2","b2":"7"}
范例3:
$scope.array = {"badge":"1,2,5,7,8,9","id":"0","b0":"1","b1":"2","b2":"5","b3":"7","b4":"8","b5":"9"}
我像这样用angularjs来获取JSON外部文件,
$http.get("/json/datas.json").success(function(data) {
$scope.datas= data;
});
值使用重复显示。
<div ng-repeat="data in datas">
<span ng-bind-html="data.text"></span>
</div>
仅显示HTML正文
aaa bbb eee ggg
一种方法是过滤,映射和/或缩小具有"bX"
值的数组以创建ID的查找表,然后根据该查找表过滤主data
数组。 除了“数组”不是数组之外,它是一个普通对象,因此您不能直接在其上使用数组方法。 因此,我要调用Object.keys()
以将其键放入数组中,然后选择使用.reduce()
基于具有正确格式的键创建查找表:
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)
您可以使用javascript原型函数map
并find
来过滤数据。 首先将批处理属性获取到数组并映射该数组以找到相关值
$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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.