Traversing unordered lists using Javascript/Jquery

Question

Lets say I have an unordered nested list:

<ul>
   <li>Item a1</li>
   <li>Item a2</li>
   <li>Item a3</li>
       <ul>
           <li>Item b1</li>
           <li>Item b2</li>
           <li>Item b3</li>
            <ul>
               <li>Item c1</li>
               <li>Item c2</li>
               <li>Item c3</li>             
            </ul>
           <li>Item b4</li>
       </ul>
  <li>Item a4</li>
</ul>

I need to traverse it and save it in a two dimensional array (ultimately I'm just trying to convert it into a JSON entity) I am allowed to use both Jquery AND/OR Javascript. How should I proceed?

Thanks

Looking at that list you look like you have a three dimensional data structure at least (three nested lists). Could you clarify what you want your output array to look like? Also I don't think you can nest <ul> directly inside another <ul>. I assume it should be inside the <li> immediately preceding it... — Chris
– Chris, Commented Jul 1, 2010 at 13:37
Thank you chris, I need a JSON entity as my output. Moreover, I will also be okay with two nested lists. Thank you — dsignr
– dsignr, Commented Jul 1, 2010 at 14:00

user113716 · Accepted Answer · 2010-07-01 14:29:15Z

2

I'm not sure exactly what you want the resulting data structure to look like, but this (which uses some jQuery):

$(function() {

    var result = {};

    function createNewLevel(parent,items) {
        var length = items.length;
        for(var i = 0; i < length; i++) {
            if(items[i].tagName == 'UL') {
                parent['ul' + i] = {};
                createNewLevel(parent['ul' + i],$(items[i]).children().get());
            } else {
                parent['li' + i] = $(items[i]).text();
            }
        }
    }

    createNewLevel(result, $('ul:first').get());

    console.log(result);

});

... would produce this structure

{
    ul0: {
        li0: "Item a1",
        li1: "Item a2",
        li2: "Item a3",
        li4: "Item a4",
        ul3: {
            li0: "Item b1",
            li1: "Item b2",
            li2: "Item b3",
            li4: "Item b4",
            ul3: {
                li0: "Item c1",
                li1: "Item c2",
                li2: "Item c3"
            }
        }
    }
}

It could be fairly easily tweaked to alter details of the resulting structure if needed.

Please note that this is a javascript object. If you actually need a JSON object, then you just need to convert it using var jsonResult = JSON.stringify( result );

answered Jul 1, 2010 at 14:29

user113716

323k64 gold badges454 silver badges441 bronze badges

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

1 Comment

Samuel Meacham Over a year ago

I find it odd when people mark an answer as the correct answer, but don't upvote it.

Gregoire · Accepted Answer · 2010-07-01 13:38:22Z

2

function traversing(ul)
{
     for(var index=0;index<ul.childNodes.length;index++){
          if(ul.childNodes[index].childNodes.length>0){
              traversing(ul.childNodes[index]);
          }
          //perform other operation
     }
}

answered Jul 1, 2010 at 13:38

Gregoire

24.9k7 gold badges50 silver badges74 bronze badges

3 Comments

dsignr Over a year ago

@Chris - Oh sorry, you're so right! A stupid mistake regarding the nesting of ul's (will edit it now). Regarding with my output, I will need it to be like : { name:item a1 children:[], name:item a2 children:[], name:item a3 children:[{ name:item b1 children:[], name:item b2 children:[], name:item b3 children:[{ name:item c1 children:[] }], }] }

gblazex Over a year ago

rather: { {name:item a1 children:[]}, {name:item a2 children:[]}, {name:item a3 children:[ {name:item b1 children:[]}, {name:item b2 children:[]}, {name:item b3 children:[ {name:item c1 children:[]} ]}, ]} }

dsignr Over a year ago

@Galambalazs Yes, yes...thats it (sorry for the illegible code) you have any code to format my output like that?

JochenJung · Accepted Answer · 2010-07-01 13:39:03Z

0

With JQuery try:

$.each($("li"), function(index, value) { 
  alert(value); 
});

answered Jul 1, 2010 at 13:39

JochenJung

7,24312 gold badges67 silver badges114 bronze badges

Collectives™ on Stack Overflow

Traversing unordered lists using Javascript/Jquery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related