0

I have a little problem with converting JSON to a list. I'm able to read all elements but currently it makes a bad list structurally.

Here is JSON:

{
  name: 'test,
  value: 'value',
  nodes: [
    {
      name: 'next test',
      value: 'next value',
      nodes: [...]
    },
    {
      name: 'third test',
      value: 'third value',
      nodes: [...]
    }
  ]
}

I'd like to create something like this:

<ul>
  <li>test: value</li>
  <ul>
    <li>next test: next value</li>
    <li>third test: third value</li>
  </ul>
</ul>

I've created a loop in CoffeeScript but it makes something like this instead:

<ul>
  <li>test: value</li>
    <ul>
      <li>next test: next value</li>
      <ul>
        <li>third test: third value</li>
      </ul>
    </ul>
  </ul>

So everything is nested in each other.

Here is my code: 

point = $('#jstree_demo_div');

        loopData = (node) ->
          if(node.name != undefined)
            name = node.name;
            value = node.value;
            ul = $('<ul>');
            li = $('<li>');
            li.append(name + ' - <b>' + value + '</b>');
            ul.append(li);
            point.append(ul);
            point = li;
            for chart in node.nodes
              loopData(chart);

        loopData(json);

Any idea what should I change here to make a proper structure list?

There is this condition:

if(node.name != undefined)

because it shouldn't go to the next deeper node when there is a name undefined.

Marek Zygmunt
  • 105
  • 2
  • 9
  • You are assigning point = li and then point.append(ul). Hence nesting the ul inside the li. I do not know the syntax so I could not write a working example :( – Antti_M May 02 '17 at 15:52

1 Answers1

1

Here's an answer with vanilla Javascript:

  var json = {
    name: 'test',
    value: 'value',
    nodes: [
      {
        name: 'next test',
        value: 'next value',
        nodes: [{}]
      },
      {
        name: 'third test',
        value: 'third value',
        nodes: [{}]
      }
    ]
  }

  function makeNewList(obj) {
    // if the object does not contain children, make a 'li' element only
    if (obj.nodes[0].name === undefined) {
      var res = document.createElement('li');
      res.innerHTML = obj.name + ": " + obj.value;
      return res;
    }
    // otherwise, first make a 'ul' element with main name and value, then
       // nest a new 'ul' with child nodes inside
    else {
      var res = document.createElement('ul');
      var nameLi = document.createElement('li');
      nameLi.innerHTML = obj.name + ": " + obj.value;
      res.appendChild(nameLi);
      var nestedNodes = document.createElement('ul');
      obj.nodes.forEach(function(node) {
        nestedNodes.appendChild(makeNewList(node));
      })
      res.appendChild(nestedNodes);
      return res
    }
  }
Sventies
  • 2,314
  • 1
  • 28
  • 44
  • Thank you! Will it stop: if(node.name != undefined) ? – Marek Zygmunt May 02 '17 at 16:22
  • I edited the code, now with assumed json. Not sure though if this is really what you want. It would help if you gave a full example of the json, so without dots between the brackets in the `nodes` attribute – Sventies May 02 '17 at 19:40
  • Here is my JSON: https://gyazo.com/ab4006af541e24a62e3982577fc00345?token=607bc51351f390017714aa27367a22d1 . Please note that when there are just arrays in node, without 'name' attribute, we should stop to go deeper. – Marek Zygmunt May 03 '17 at 10:27
  • Thanks, but what I really need is an example of this last node without name attribute. Because what you describe now is exactly what I tried to make with the example `json`. (namely, an empty object that does not have a name attribute). – Sventies May 03 '17 at 12:48
  • Hm, on my screenshot is the last node without the name attribute. There are just arrays and we don't want to go inside. Last
  • with name and value we want to display is "Renata Lupa", because in the next nodes we don't have any names.
    • – Marek Zygmunt May 03 '17 at 13:24