Convert json structure to drop-down list using angular js

Question

I have a json that has the property categories[], and inside each categories there is a subCategories[]; and for eachsubCategories there is a subSubCategories. I would want to generate the dropdowns based on the given json structure.

{
  "categories": [
    {
      "men": "Mens",
      "subCat": [
        {
          "topWear": "Top Wear",
          "subSubCat": [
            {
              "tshirts": "T-shirts",
              "otherAttributes": [
                {
                  "fitting": [
                    "type 1",
                    "type 2",
                    "type 3"
                  ]
                },
                {
                  "washCare": [
                    "wash Care 1",
                    "wash care 2"
                  ]
                }
              ]
            },
            {
              "shirt": "Shirt",
              "otherAttributes": [
                {
                  "fitting": [
                    "type 4",
                    "type 5",
                    "type 6"
                  ]
                },
                {
                  "washCare": [
                    "wash Care 4",
                    "wash care 5"
                  ]
                }
              ]
            }
          ]
        },
        {
          "bottomWear": "Bottom Wear"
        }
      ]
    },
    {
      "women": "Women",
      "subCat": [
        {
          "topWear": "Top Wear",
          "subSubCat": [
            {
              "tshirts": "T-shirts",
              "otherAttributes": [
                {
                  "fitting": [
                    "w-type 1",
                    "type 2",
                    "type 3"
                  ]
                },
                {
                  "washCare": [
                    "w-wash Care 1",
                    "wash care 2"
                  ]
                }
              ]
            },
            {
              "shirt": "Shirt",
              "otherAttributes": [
                {
                  "fitting": [
                    "w-type 4",
                    "type 5",
                    "type 6"
                  ]
                },
                {
                  "washCare": [
                    "w-wash Care 4",
                    "wash care 5"
                  ]
                }
              ]
            }
          ]
        },
        {
          "bottomWear": "Bottom Wear"
        }
      ]
    },
    {
      "kids": "Kids"
    }
  ]
}

For example:

Initially first drop-down should be populated with mens,women,kids options.
Next on main category selection, second drop-down should populate with subCat options.
Next, on subCat selection, third drop-down should populate with subSubCatoptions.

How can I achieve this using angular?

if your JSON is mapped to an object, then you can just use ng-options to populate the dropdowns; when you select an option from the first dropdown, it's ng-model will be one of the objects from the first level of the array, along with all it's possible options for the second ng-options, and so on. — Claies
– Claies, Commented Jan 2, 2018 at 7:26
I tried to list main category, but I am unable to populate, jsfiddle.net/08z4kb09/6 — mayank bisht
– mayank bisht, Commented Jan 2, 2018 at 8:36

hurricane · Accepted Answer · 2018-01-02 11:04:16Z

1

First of all your example is not working. And your structure is not perfect for this situation. I have created an example for you : FIDDLE

You can use it like:

html

<div ng-controller="DemoCtrl" ng-app="main">
    <hr>
    <select ng-model="selectedFirst" ng-options="first.name for first in categories track by first">
    <option value="">Select Account</option>
  </select>
  <select ng-model="selectedSecond"  ng-options="second.name for second in selectedFirst.categories track by second">
    <option value="">Select Account</option>
  </select>
</div>

js

(function () {
  'use strict';

  /**
   * Main module of the main
   */
  angular
    .module('main', []);
})();


(function(){
    'use strict'

  angular
    .module('main')
    .controller('DemoCtrl', DemoCtrl);

  /** @ngInject */
  function DemoCtrl($scope) {
    $scope.categories = [
        {
        "name" : "Mens",
        "categories" : [
            {
                "name" : "Top Wear",
                "categories" : [
                    {

                    }
                ]
            }
        ]
      }
    ];
  }
})();

edited Jan 2, 2018 at 11:04

answered Jan 2, 2018 at 10:08

hurricane

6,7342 gold badges39 silver badges45 bronze badges

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

2 Comments

mayank bisht Over a year ago

Thanks for posting the answer, but your fiddle is not working, getting Error 500

mayank bisht Over a year ago

Second drop-down list is not working, when i add more items in main category array. When I select mens, then also w-top wear is getting populated int second drop-down list. Check here jsfiddle.net/08z4kb09/23

Collectives™ on Stack Overflow

Convert json structure to drop-down list using angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related