How to list categories and sub-categories from a JSON file?

Question

The code below is supposed to create a list of categories and sub-categories in vanilla js. I am using 2 for-loops. The code works fine for the first level, but not when adding the second level. Can anyone tell me why it only returns the first category? I am a newbie.

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(xhttp.responseText);
      var allBirds = response.birds;

      for (var i = 0; i < allBirds.length; i++) {
        var el = document.createElement('li');
        el.innerHTML = allBirds[i].family;
        var ul = document.getElementById('overview');
        insertAfter(ul, el);

        var members = allBirds[i].members;
        for (var j = 0; j < members.length; j++) {
          var elj = document.createElement('h5');
          var ulj = document.getElementById('innerView');
          insertAfter(elj, ulj);
        }
      }
    }
  };

xhttp.open('GET', 'JSON/birds.json', true);
xhttp.send();

This is the desired outcome: category sub-category sub-category category sub-category . .

Answer 1

If you try parse a array/object use a recursive function to seal with every "layer" on its own. Call the function with the top Node. The function have to loop over all child elements and decide if it is a leaf (a node this no child elements) or a node (containing child elements).

If it is a Leaf, you could generate some output. If it is a Node you go deeper in to the rabbit hole :)

The for-loop you use is a classic one. A counter increments every loop and you get the value from the array. I use a other for-loop. I don't need to know the array keys. I just ask the array "Hey! give me all your keys". And then i use this keys for(var key in node)

To check the type of a child I use typeof witch will return the type of the variable as a string (e.g. typeof("Hello World") will return "string"). So you can decide what to do with the variable/child.

The next thing is the ===. This is a other operator then ==. Short story: === check for identity and == for equality. Lets say you have tow friends named Alex. The have the same name (==) but where different (!==) persons. Long story: Which equals operator (== vs ===) should be used in JavaScript comparisons?

Then I add a counter (deep) to know the level of recursion (but i don't use it) It is up to you to create your output depending on the level. You could add some dots before the text to show the depth or something else. I would properly use this var text = '...........'.substr(0,deep) + node[key].family

A recursive function like this:

function listChildren(node, deep){
    for (var key in node) {
      if(typeof(node[key])  === 'array' || typeof(node[key]) === 'object'){
        var el = document.createElement('li');
        el.innerHTML(key);
        var ul = document.getElementById('overview');
        insertAfter(el, ul);
        listChildren(node[key], ++deep);
      }else{
        var el = document.createElement('li');
        el.innerHTML(node[key].family);
        var ul = document.getElementById('overview');
        insertAfter(el, ul);
    }
}

This is only a hint. you have to modify it for your needs!

Answer 2

Just focusing on this part, you should create it all dynamically:

function birdLister(xhrResponse, appendTo){
  var allBirds = xhrResponse.birds, all = document.createElement('ul');
  for(var i=0,b,ti,ui,u,m,l=allBirds.length; i<l; i++) {
    b = allBirds[i]; ti = document.createElement('li'); ti.innerHTML = b.family;
    ui = document.createElement('il'); u = document.createElement('ul'); m = b.members;
    for(var n=0,li,c=m.length; n<c; n++){
      li = document.createElement('li'); li.innerHTML = m[n]; u.appendChild(li);
    }
    ui.appendChild(u); all.appendChild(ti); all.appendChild(ui);
  }
  appendTo.appendChild(all);
}

Now inside your XHR:

var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'JSON/birds.json');
xhttp.onreadystatechange = function(){
  if(this.readyState === 4 && this.status === 200){
    var response = JSON.parse(this.responseText);
    birdLister(response, document.getElementById('output'));
  }
}
xhttp.send();

Answer 3

For other users, this is how I got PHPglue's code to work for me:

var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'JSON/birds.json');
xhttp.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    var response = JSON.parse(this.responseText);
    BirdLister(response, document.getElementById('overview'));
  }
};

function BirdLister(xhrResponse, appendTo) {
  var allBirds = xhrResponse.birds;
  var all = document.createElement('ul');
  for (var i = 0, b, ti, ui, u, m, l = allBirds.length; i < l; i++) {
    b = allBirds[i]; ti = document.createElement('h4'); ti.innerHTML = b.family;
    ui = document.createElement('h5'); u = document.createElement('ul'); m = b.members;
    for (var n = 0, li, c = m.length; n < c; n++) {
      li = document.createElement('li'); li.innerHTML = m[n]; u.appendChild(li);
    }

    ui.appendChild(u); all.appendChild(ti); all.appendChild(ui);
  }

  appendTo.appendChild(all);
}

xhttp.send();

The corresponding HTML file is simply a basic setup and one div with the ID 'overview in the body.

https://github.com/dariusk/corpora/blob/master/data/animals/birds_antarctica.json