Build Cascading dropdown from nested JSON of unknown depth with jQuery

Question

I'm trying to dynamically build a cascading dropdown from a nested JSON object which can be of any depth but gotten stuck on the implementation.

The JSON from the server looks like this:

var data = {
    typ: 'Gren',
    namn: 'Bana',
    items: [{
        typ: 'Disciplin',
        namn: 'Eliminiering',
        items: [{
            typ: 'Klass',
            namn: 'Damer Elit',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Damer Junior',
            items: []
        }]
    }, {
        typ: 'Disciplin',
        namn: 'Poänglopp',
        items: [{
            typ: 'Klass',
            namn: 'Damer Senior',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Flickor 13-14',
            items: []
        }]
    }]
};

So the first dropdown should contain two items: Eliminering and Poänglopp. The second dropdown should contain either: Damer Elit and Damer Junior if Elimiering in the first dropdown is selected. If Poänglopp is selected, the second dropdown should contain: Damer Senior and Flickor 13-14. And so on.

If the items array is empty, there are no sub-categories so no more dropdowns needs to be created. Again: The arrays can be of any depth.

Any help/ideas how to implement this is greatly appreciated!

What did you try? Please show us some of your code

Zhertal
– Zhertal

2015-06-09 08:06:44 +00:00
Commented Jun 9, 2015 at 8:06 — Zhertal
– Zhertal, Commented Jun 9, 2015 at 8:06
I guess you'd need to use a recursive function

George
– George

2015-06-09 08:10:50 +00:00
Commented Jun 9, 2015 at 8:10 — George
– George, Commented Jun 9, 2015 at 8:10

Oka · Accepted Answer · 2015-06-09 09:00:46Z

You can do something like this very easily with recursion.

Here's a rough example.

DEMO

function toggleChildren (e) {
  e.stopPropagation();
  
  var el = $(this);
  el.children('ul').toggle();
}

function buildNests (obj, parent) {
  var item = $('<li />', {
    text: obj.namn,
    on: {
      click: toggleChildren
    }
  }),
  list = $('<ul />', {
    html: [item]
  });
  
  parent.append(list);
  
  if (obj.items.length > 0) {
    obj.items.forEach(function (e) {
      buildNests(e, item);
    });
  }
}

var data = {
    typ: 'Gren',
    namn: 'Bana',
    items: [{
        typ: 'Disciplin',
        namn: 'Eliminiering',
        items: [{
            typ: 'Klass',
            namn: 'Damer Elit',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Damer Junior',
            items: []
        }]
    }, {
        typ: 'Disciplin',
        namn: 'Poänglopp',
        items: [{
            typ: 'Klass',
            namn: 'Damer Senior',
            items: []
        }, {
            typ: 'Klass',
            namn: 'Flickor 13-14',
            items: []
        }]
    }]
};

buildNests(data, $('#con'));

<div id="con"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Build Cascading dropdown from nested JSON of unknown depth with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest