AngularJS如何根据指定参数过滤JSON数据

Question

我有外部 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

Answer 1

一种方法是过滤、映射和/或减少具有 "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)

Answer 2

您可以使用 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>