I need to create a dynamic nested ul\li list from json array.

NOTE! I can do that transformation my self using jQuery, but in this case i need to work with a string, since it's node.js and i don't have access to DOM.

Also the array can have different depth.

This is json data i work with and how it should look after transformation.

var data = [{"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
        {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
        {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
        {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}];

<ul>
  <li>name_1</li> //depth 0
  <li>name_2  //depth 0
    <ul>
      <li>name_3 //depth 1
        <ul>
          <li>name_3</li> //depth 2
        </ul>
      </li>
    </ul>
  </li>
</ul>

I hope this is clear. If not please ask any questions in the ment. Thank you in advanced.

I need to create a dynamic nested ul\li list from json array.

NOTE! I can do that transformation my self using jQuery, but in this case i need to work with a string, since it's node.js and i don't have access to DOM.

Also the array can have different depth.

This is json data i work with and how it should look after transformation.

var data = [{"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
        {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
        {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
        {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}];

<ul>
  <li>name_1</li> //depth 0
  <li>name_2  //depth 0
    <ul>
      <li>name_3 //depth 1
        <ul>
          <li>name_3</li> //depth 2
        </ul>
      </li>
    </ul>
  </li>
</ul>

I hope this is clear. If not please ask any questions in the ment. Thank you in advanced.

• javascript
• html
• arrays
• json
• node.js

• That's some weird JSON there. The whole point of JSON is, I think, the fact that it's hierarchical. Your JSON seems 'flattened'. – Kerstomaat Commented Jan 15, 2014 at 14:38
• Yes, it is. So, i need to work with this ( – Yaroslav Basovskyy Commented Jan 15, 2014 at 14:44
• That's some weird HTML to, if you at least put the next depth in it's own LI and not within the same LI as the previous depth, it would be easier. – adeneo Commented Jan 15, 2014 at 14:45
• I agree with @simonplus - are you in control of the JSON format? If so, get rid of the ids and embed the children into an array attribute of their parents. Has the side effect that it'll be much smaller. – virtualnobi Commented Jan 15, 2014 at 14:53
• You can see that each json line has a parent_id which match the id of one of the json strings. If you see another structure, please share. Thanks. – Yaroslav Basovskyy Commented Jan 15, 2014 at 14:54

3 Answers 3

Try this:

var data = [{"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
    {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
    {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
    {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}];

var initLevel = 0;

var endMenu =getMenu("0");

function getMenu( parentID ){
       return data.filter(function(node){ return ( node.parent_id === parentID ) ; }).map(function(node){
           var exists = data.some(function(childNode){  return childNode.parent_id === node.id; });
           var subMenu = (exists) ? '<ul>'+ getMenu(node.id).join('') + '</ul>' : "";
           return '<li>'+node.name +  subMenu + '</li>' ;
       });
 }
console.log( '<ul>'+endMenu.join('')+ '</ul>');

However, I think the correct output based on your data will be something like:

    <ul>
        <li>name_1
            <ul>
                <li>name_3
                    <ul>
                        <li>name_4</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>name_2</li>
    </ul>

Here is the JSFiddle sample

Updated Version:

http://jsfiddle/LqES7/47/

I'd first convert the flat data to hierarchical json, using something like this, so it's more iterable. Then recursively iterate the JSON and add every element to a string.

If i understand the question correctly you are trying to genereat a list in html from a array of objects.

So if your not using JQuery, probably one of these will help you out:

• Create ul and li elements in javascript.
• Create a UL and fill it based on a passed array

And if your using JQuery, probably this will help you out:

• How to generate UL Li list from string array using jquery?