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

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

例如：

这个数组有b0、b1、b2和b3，这些值是1、2、5和7。因此，我只想从DataSJSON文件中获取1、2、5、7个值数组，并显示该数组的文本值

可以使用相同的格式更改此数组。为此，我想考虑B+“数”参数。 例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的查找表，然后基于该查找表过滤主

数据

数组。除了“array”不是数组之外，它是一个普通对象，所以不能直接对其使用数组方法。因此，我调用

Object.keys（）

以获取数组中的键，然后我选择使用创建基于具有正确格式的键的查找表：

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”{“jj]
var$scope={}//demo$scope对象
$scope.array={“徽章”：“1,2,5,7”，“id”：“0”，“b0”：“1”，“b1”：“2”，“b2”：“5”，“b3”：“7”}
var bVals=Object.keys（$scope.array）.reduce（函数（a，c）{
如果（/^b\d+$/.test（c））
a[$scope.array[c]]=true
归还
}, {})
console.log（bVals）
var filteredData=data.filter（函数（v）{return bVals[v.value]}）
log（filteredData）

一种方法是过滤、映射和/或减少具有

“bX”

值的数组，以创建ID的查找表，然后基于该查找表过滤主

数据

数组。除了“array”不是数组之外，它是一个普通对象，所以不能直接对其使用数组方法。因此，我调用

Object.keys（）

以获取数组中的键，然后我选择使用创建基于具有正确格式的键的查找表：

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”{“jj]
var$scope={}//demo$scope对象
$scope.array={“徽章”：“1,2,5,7”，“id”：“0”，“b0”：“1”，“b1”：“2”，“b2”：“5”，“b3”：“7”}
var bVals=Object.keys（$scope.array）.reduce（函数（a，c）{
如果（/^b\d+$/.test（c））
a[$scope.array[c]]=true
归还
}, {})
console.log（bVals）
var filteredData=data.filter（函数（v）{return bVals[v.value]}）
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)) 

角度模块（“应用程序”，[]） .controller（“ctrl”，函数（$scope，$sce）{ $scope.datas=[ {“值”：“1”，“文本”：“aaa”}， {“值”：“2”，“文本”：“bbb”}， {“值”：“3”，“文本”：“ccc”}， {“值”：“4”，“文本”：“ddd”}， {“值”：“5”，“文本”：“eee”}， {“值”：“6”，“文本”：“fff”}， {“值”：“7”，“文本”：“ggg”}， {“值”：“8”，“文本”：“hhh”}， {“值”：“9”，“文本”：“iii”}， {“值”：“10”，“文本”：“jjj”} ] $scope.array={“徽章”：“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）） log（$scope.result） $scope.trust=函数（html）{ 返回$sce.trustAsHtml（html）； } })

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

角度模块（“应用程序”，[]） .controller（“ctrl”，函数（$scope，$sce）{ $scope.datas=[ {“值”：“1”，“文本”：“aaa”}， {“值”：“2”，“文本”：“bbb”}， {“值”：“3”，“文本”：“ccc”}， {“值”：“4”，“文本”：“ddd”}， {“值”：“5”，“文本”：“eee”}， {“值”：“6”，“文本”：“fff”}， {“值”：“7”，“文本”：“ggg”}， {“值”：“8”，“文本”：“hhh”}， {“值”：“9”，“文本”：“iii”}， {“值”：“10”，“文本”：“jjj”} ] $scope.array={“徽章”：“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）） log（$scope.result） $scope.trust=函数（html）{ 返回$sce.trustAsHtml（html）； } })

Wow，我简直不敢相信我没有注意到

badge

属性与个人

bX

属性具有相同的信息。那会简化我的代码。哦，好吧。@nnnnnn是的，我刚刚看到一半：D@Hey-为什么？我的答案中的代码片段可以直接从这个页面运行，因此您可以看到它是有效的。哇，我不敢相信我没有注意到

badge

属性与个人

bX

属性具有相同的信息。那会简化我的代码。哦，好吧。@nnnnnn是的，我刚刚看到一半：D@Hey-为什么？我的答案中的代码段可以直接从此页运行，因此您可以看到它是有效的。@嘿，我个人并不喜欢JSFIDLE。创建了一个plnkr，但是你能解释我o=>$scope.data.find（k=>k.value==o）这个吗。你为什么会没事。我们可以用后者吗？这些是