Best way to iterate over JSON So this is my first time going over a pretty big nested object, was posting this up to see how I can possibly cut this down. (Some fears I have would be, I currently know the extent of the nesting (4) but could be more in the future. Which I'm not accounting for. ) 

The code below sits within a function:

if (itemLi.items) {

var ul = new Element('ul').inject(el)
for (var i = 0; i &lt; itemLi.items.length; i++) {
    var li = new Element('li').inject(ul);
    lastPgNum = itemLi.items[i].page;
    //subItem = new Element('a', {'href': itemLi.items[i].href,'html': itemLi.items[i].title}).inject(li);
    if (itemLi.items[i].items) {

        subItem = new Element('span', {
            'html': itemLi.items[i].title,
            'class': 'pgTitle'
        }).inject(li);
        var ulsub = new Element('ul', {
            'class': 'here1'
        }).inject(ul)

        for (var b = 0; b &lt; itemLi.items[i].items.length; b++) {
            var liSub = new Element('li').inject(ulsub);
            lastPgNum = itemLi.items[i].items[b].page;
            countSubSubs++;

            if (itemLi.items[i].items[b].items) {
                subItem = new Element('span', {
                    'html': itemLi.items[i].items[b].title,
                    'class': 'pgTitle'
                }).inject(liSub);
                var ulsubTwo = new Element('ul', {
                    'class': 'here2'
                }).inject(ulsub)
                for (var c = 0; c &lt; itemLi.items[i].items[b].items.length; c++) {
                    var li = new Element('li').inject(ulsubTwo);
                    lastPgNum = itemLi.items[i].items[b].items[c].page;
                    countSubSubsSub++;
                    subSubItem = new Element('a', {
                        'href': itemLi.items[i].items[b].items[c].href,
                        'html': itemLi.items[i].items[b].items[c].title
                    }).inject(li);
                };
                var startPgSub = new Element('span', {
                    'class': 'pgNumbers',
                    'html': 'pg ' + (lastPgNum - (countSubSubs + countSubSubs + i + 1)) + '-' + lastPgNum
                }).inject(name);
            } else {

                var startPgSub = new Element('span', {
                    'class': 'pgNumbers',
                    'html': 'pg ' + (lastPgNum - (countSubSubs)) + '-' + lastPgNum
                }).inject(name);
                subItem = new Element('a', {
                    'href': itemLi.items[i].items[b].href,
                    'html': itemLi.items[i].items[b].title
                }).inject(liSub);
            }

        };
    } else {

        subItem = new Element('a', {
            'href': itemLi.items[i].href,
            'html': itemLi.items[i].title
        }).inject(li);

        if ((lastPgNum - i) == lastPgNum) {
            startPg = new Element('span', {
                'class': 'pgNumbers',
                'html': 'pg ' + lastPgNum
            }).inject(name);
        } else {
            startPg = new Element('span', {
                'class': 'pgNumbers',
                'html': 'pg ' + (lastPgNum - i) + '-' + lastPgNum
            }).inject(name);
        }

    }
};

};
You could use a recursive function to traverse your object and generate the HTML.

Something like:

function generateList(items, depth) {
    if (!depth) depth = 0;
    var ul = new Element('ul');
    if (depth) { ul.addClass('here' + depth); }
    for (var i = 0; i &lt; items.length; ++i)
    {
        var item = items[i];
        var li = new Element('li').inject(ul);
        if (item.items) {
            li.adopt(new Element('span', {
                'html' : item.title,
                'class': 'pgTitle'
            }));
            li.adopt(generateList(item.items, depth + 1));
        } else {
            li.adopt(new Element('a', {
                'href' : item.href,
                'title': item.title
            }));
        }
    }
    return ul;
}

if (itemLi.items) {
    generateList(itemLi.items).inject(el);
}


This doesn't include code to add the page spans, cause i don't understand yet how they should be generated.  (The code doesn't include declarations of the variables involved, for starters.)  But it should generate a list of links, with sublists for any items that have sub-items.  The classes for the sublists are kinda unnecessary -- CSS can select them just fine as ul&gt;li&gt;ul and ul&gt;li&gt;ul&gt;li&gt;ul -- so unless you have some other need to track the amount of nesting, you could get rid of depth and the class on the uls.