Dropdown list selecting a filter

Question

I'm trying to get every properties of a json object in order to create a dropdown list.

I'm going to explain myself, for example :

I've got 2 json objects :

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

I've got a dropdown list within {name,age,sport,color,fruit,number} . If I select name, I've got a second dropdown list within {Paul,Jhon} .

I'm using AngularJS, Node.js

I know that after getting every properties I have to apply unicity filter, to only have the differents properties but not the occurence

Answer 1

Assuming ES6 is good and we can use Set to return unique values (if no - you can use some other techniques to get an array with unique elements ) you can use ngChange directive to detect changes of the first select and populated options for the second select. So the controller and markup will look like:

 angular.module('myApp', []) .controller('MyCtrl', function MyCtrl($scope) { var ctrl = this; var data = [ {"name":"Paul","age":"18","sport":"Basket","color":"Green"}, {"name":"Jhon","age":"20","sport":"Basket","fruit":"banana", "number":"5"}, {"name":"Mark","age":"22","sport":"Football","color":"Red", "number":"5"} ]; ctrl.objKeys = getUniqueKeys(data); ctrl.objVals = []; ctrl.keyChanged = keyChanged; function keyChanged(key) { ctrl.objVals = getUnique(data.map(function(obj) { return obj[key] }).filter(function(obj) { return !!obj; })); //get the values and filter only the ones are defined } function getUnique(arr) { return [...new Set(arr)]; //get array with unique values } function getUniqueKeys(arr) { return getUnique([].concat.apply([], arr.map(function(obj) { return Object.keys(obj); }))); //get the property names } return ctrl; }); 

 <script src="//code.angularjs.org/1.6.2/angular.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl as $ctrl"> <select ng-model="objKey" ng-change="$ctrl.keyChanged(objKey)" ng-options="k for k in $ctrl.objKeys track by k"></select> <select ng-if="$ctrl.objVals.length" ng-model="objVal" ng-options="k for k in $ctrl.objVals track by k"></select> </div> </div> 

Answer 2

May not be perfect but it is working

HTML:

 <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>

Controller:

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]);
     }      
   });
  };
});

Jsfiddle Demo: http://jsfiddle.net/sathvike/vzzmrnvL/