Javascript 选择过滤器的下拉列表

我试图获取json对象的每个属性，以便创建一个下拉列表

我要解释我自己，例如：

我有两个json对象：

{"name":"Paul","age":"18","sport":"Basket","color":"Green"}
{"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}

我在

{name，age，sport，color，fruit，number}

中有一个下拉列表。 如果我选择name，我在

{Paul，Jhon}

中会有第二个下拉列表

我用的是AngularJS，Node.js

---

我知道，在获得每个属性后，我必须应用unicity筛选器，以便只具有不同的属性，而不具有发生情况

可能并不完美，但它正在工作

HTML:

---

jsiddle演示：

可能并不完美，但它正在工作

HTML:

---

JSFIDLE Demo:

假设ES6很好，我们可以使用它返回唯一的值（如果没有-您可以使用），您可以使用它来检测第一个select和第二个select的填充选项的更改。因此，控制器和标记将如下所示：

angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数MyCtrl（$scope）{
var ctrl=this；
风险值数据=[
{“姓名”：“保罗”，“年龄”：“18”，“运动”：“篮子”，“颜色”：“绿色”}，
{“姓名”：“Jhon”，“年龄”：“20”，“运动”：“篮子”，“水果”：“香蕉”，“数字”：“5”}，
{“姓名”：“马克”，“年龄”：“22”，“运动”：“足球”，“颜色”：“红色”，“数字”：“5”}
];
ctrl.objKeys=getUniqueKeys（数据）；
ctrl.objVals=[]；
ctrl.keyChanged=keyChanged；
功能键已更改（键）{
ctrl.objVals=getUnique（data.map（函数（obj）{return obj[key]}）.filter（函数（obj）{return！！obj；}）；//获取值并仅过滤定义的值
}
函数getUnique（arr）{
return[…new Set（arr）]；//获取具有唯一值的数组
}
函数getUniqueKeys（arr）{
return getUnique（[].concat.apply（[]，arr.map（函数（obj）{return Object.keys（obj）；}））；//获取属性名
}
返回ctrl；
});
假设ES6良好，我们可以使用返回唯一值（如果否-您可以使用），您可以使用检测第一个选择的更改和第二个选择的填充选项。因此，控制器和标记将如下所示：


angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数MyCtrl（$scope）{
var ctrl=this；
风险值数据=[
{“姓名”：“保罗”，“年龄”：“18”，“运动”：“篮子”，“颜色”：“绿色”}，
{“姓名”：“Jhon”，“年龄”：“20”，“运动”：“篮子”，“水果”：“香蕉”，“数字”：“5”}，
{“姓名”：“马克”，“年龄”：“22”，“运动”：“足球”，“颜色”：“红色”，“数字”：“5”}
];
ctrl.objKeys=getUniqueKeys（数据）；
ctrl.objVals=[]；
ctrl.keyChanged=keyChanged；
功能键已更改（键）{
ctrl.objVals=getUnique（data.map（函数（obj）{return obj[key]}）.filter（函数（obj）{return！！obj；}）；//获取值并仅过滤定义的值
}
函数getUnique（arr）{
return[…new Set（arr）]；//获取具有唯一值的数组
}
函数getUniqueKeys（arr）{
return getUnique（[].concat.apply（[]，arr.map（函数（obj）{return Object.keys（obj）；}））；//获取属性名
}
返回ctrl；
});


 <div ng-controller="MyCtrl">
      <select ng-model="selectedItem" ng-change="itemChanged()" ng-options="item for item in list1">
      </select>
      <select ng-model="second" ng-options="lst for lst in list2 "></select>

 </div>

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.list1 = ["name","age","sport","color","fruit","number"];
$scope.data = [{"name":"Paul","age":"18","sport":"Basket","color":"Green"},{"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}];
  $scope.itemChanged = function() {
   var prop = $scope.selectedItem;     
   $scope.list2 = [];
   $scope.data.forEach(x => {
     if(x[prop] && $scope.list2.indexOf(x[prop])) {
       $scope.list2.push(x[prop]);
     }      
   });
  };
});