Dynamic nested ul\li list from json data using Javascript

Question

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 comment. Thank you in advanced.

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
– Kerstomaat, Commented Jan 15, 2014 at 14:38
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
– 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
– 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
– Yaroslav Basovskyy, Commented Jan 15, 2014 at 14:54

Dalorzo · Accepted Answer · 2014-08-12 19:45:07Z

12

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.net/LqES7/47/

edited Aug 12, 2014 at 19:45

answered Jan 15, 2014 at 15:10

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

6 Comments

Yaroslav Basovskyy Over a year ago

Hello again. After a little playing with this i found that it has a bug. Try to change third line parent_id to 2 and it's not working(( If you have any thoughts, please help.

Dalorzo Over a year ago

@user2960708 found it, I updated both the fiddle and the answer

Yaroslav Basovskyy Over a year ago

Yes, now it's working. Thank you. But i have one more challenge. I'm building sortable nested menu. And when i'm changing the order of element it isn't changing in db. So, i've added index value to each element and now i need to change the function to sort elements according to that index. It would be grate if you have any thoughts ))

Yaroslav Basovskyy Over a year ago

yes, i just getting the index of li according to it siblings and saving it to db. It looks like this now {"id": "1", "name": "name_1", "parent_id": "0", "depth": "0", index: 0}

Monzurul Haque Over a year ago

I am having problem with this example. Please check this fiddle jsfiddle.net/LqES7/16 and tell me why it's getting the extra "," between two same level li tag

|

Community · Accepted Answer · 2017-05-23 12:00:53Z

1

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.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jan 15, 2014 at 14:55

Kerstomaat

7134 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:19:23Z

0

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:

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

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jan 15, 2014 at 14:54

Erex

1,6931 gold badge17 silver badges21 bronze badges

Collectives™ on Stack Overflow

Dynamic nested ul\li list from json data using Javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related