Unable to populate nested array to dropdown with angular js

Question

I am trying to populate json to dropdown list, mainly main category, sub category and sub sub category .
I am able to populate main category and sub category, but i am unable to populate subsubcategory.
Also only based on main category, sub category should be populated, similarly based on sub category, sun sub category dropdown should be filled with options.

Please help.

Code

var app = angular.module('main', []);
app.controller('DemoCtrl', function($scope) {
  $scope.chooseCategories = [{
    categoryId: 1,
    catName: "men",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "m-top-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }, {
      key: "bottomwear",
      value: "m-bottom-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 2,
    catName: "women",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "w-top-wear",
			subSubCat: [{
        key: "Wa",
        value: "W-A"
      }, {
        key: "Wb",
        value: "w-B"
      }]
    }, {
      key: "bottomwear",
      value: "w-bottom-wear",
			subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 3,
    catName: "kids",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "k-top-wear"
    }, {
      key: "bottomwear",
      value: "k-bottom-wear"
    }]
  }];
  var locationsArr = $scope.chooseCategories.map(function(item) {
    return item.subcat;
  });

  var temp = $scope.chooseCategories.map(function(item) {
    return item.subcat;
  });

  $scope.finalArr = locationsArr[0].concat(locationsArr[1]).concat(locationsArr[2]);

  $scope.selectedCountry = $scope.chooseCategories[0].categoryId.toString();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
  Main category::<select ng-model="selectedCountry">
    <option ng-repeat="x in chooseCategories" value="{{x.categoryId}}"> {{x.catName}}</option>
  </select>
  <hr>
 Sub category:: <select ng-model="selectedsubcategory">
    <option ng-repeat="locations  in finalArr" value="{{locations.key}}"> {{locations.value}}</option>
  </select>
  <hr>
  Sub sub category::<select ng-model="selectedsubSubcategory">
    <option ng-repeat="locations  in finalArr2" value="{{locations.key}}"> {{locations.value}}</option>
  </select>
</div>

Fiddle link is broken

Nemani
– Nemani

2018-01-02 10:17:37 +00:00
Commented Jan 2, 2018 at 10:17 — Nemani
– Nemani, Commented Jan 2, 2018 at 10:17
try with this: jsfiddle.net/08z4kb09/18

mayank bisht
– mayank bisht

2018-01-02 10:21:07 +00:00
Commented Jan 2, 2018 at 10:21 — mayank bisht
– mayank bisht, Commented Jan 2, 2018 at 10:21
I have updated my question with the code :)

mayank bisht
– mayank bisht

2018-01-02 10:28:41 +00:00
Commented Jan 2, 2018 at 10:28 — mayank bisht
– mayank bisht, Commented Jan 2, 2018 at 10:28

jitender · Accepted Answer · 2018-01-02 10:48:00Z

2

What about

var app = angular.module('main', []);
app.controller('DemoCtrl', function($scope) {
  $scope.chooseCategories = [{
    categoryId: 1,
    catName: "men",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "m-top-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }, {
      key: "bottomwear",
      value: "m-bottom-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 2,
    catName: "women",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "w-top-wear",
			subSubCat: [{
        key: "Wa",
        value: "W-A"
      }, {
        key: "Wb",
        value: "w-B"
      }]
    }, {
      key: "bottomwear",
      value: "w-bottom-wear",
			subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 3,
    catName: "kids",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "k-top-wear"
    }, {
      key: "bottomwear",
      value: "k-bottom-wear"
    }]
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
  <select ng-model="selectedCategory" ng-options="x.catName for x in chooseCategories" ng-init="selectedCategory = chooseCategories[0]">
  </select>
  <hr>
  <select ng-model="selectedsubcategory" ng-options="x.value for x in selectedCategory.subcat" ng-init="selectedsubcategory = selectedCategory.subcat[0]">
  </select>
  <hr>
    <select ng-model="selectedsubSubcategory" ng-options="x.value for x in selectedsubcategory.subSubCat">
  </select>
</div>

answered Jan 2, 2018 at 10:48

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mayank bisht Over a year ago

thanks for the answer, it's working as expected. But I have one more doubt, now i have one more field in every subSubCatarray, i.e otherOptions, I want these also to be printed on individual subsubcat selection. Updated code: jsfiddle.net/08z4kb09/26

jitender Over a year ago

how it should look like and where you want to print?

mayank bisht Over a year ago

it should come after the subsubcat dropdown. If there are any otherOptions for particular product, then it should display. For example product with subsubCat T-shirt has 3 otherOtions va;es, then after subSubCat those 3 should also as a dropdown list.

mayank bisht Over a year ago

Thanks, one last how can i print all the selected values from the dropdown, I tried like ` ng-controller="DemoCtrl as opt"and then binding every model to opt.` but it's not working.

mayank bisht Over a year ago

Hey, now I am able to print values, but for otherOptions, I am only getting last selected value, not the all values. See this :: jsfiddle.net/08z4kb09/29

|

Collectives™ on Stack Overflow

Unable to populate nested array to dropdown with angular js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related