如何根據指定的參數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>