recursively object to ul list and add class with index in javascript

Question

I have a working recursive function that creates an <ul> list from an object, it works fine,
my problem is that I want to keep track of the index, and add it as class to <li> elements,
I need that the "index count system" will count in a particular way, and this is the output that I want :

class0
    class0_0
        class0_0_0
        class0_0_1

    class0_1
        class0_1_0
        class0_1_1


class1
    class1_0
        class1_0_0
        class1_0_1

    class1_1
        class1_1_0
        class1_1_1

by increasing, restarting and have maybe multiple "index count" variables in the recirsive function

This is what I'm trying, but I still can't figure out where to properly set, increase, reset the counters to achieve that result..

var i = 0;
function object2ul(data) {
    var json = "<ul>";

    for(var key in data) {
        json = json + "<li>" +'<b>'+i+'</b>'+ key; i++;
        if(typeof data[key] == 'object') {
            json = json + object2ul(data[key]);
        }else{ i=0;
            json = json + '<ul><li>'+ data[key]+'</li></ul>';
        }
        json = json + "</li>";
    }
    return json + "</ul>";
}

document.body.innerHTML = object2ul(object);

In this example I omitted to set the classes avoiding to complicate the function

DEMO

Answer 1

Something like this?

 var object = { root0: { child0: { leaf: 'text', leaf: 'text' }, child1: { leaf: 'text', leaf: 'text' } }, root1: { child0:{ leaf: 'text', leaf: 'text' }, child1: { leaf: 'text', leaf: 'text' } } }; var i = 0; function object2ul(data, prefix) { prefix = prefix || '0'; // default var json = "<ul>"; var childIndex = 0; for(var key in data) { json = json + "<li>" +'<b>'+i+'</b>'+ key; i++; if(typeof data[key] == 'object') { json = json + object2ul(data[key], prefix + '_' + childIndex); }else{ i=0; json = json + '<ul><li>'+ data[key]+'---(' + prefix + ')</li></ul>'; } json = json + "</li>"; childIndex++; } return json + "</ul>"; } document.body.innerHTML = object2ul(object); 

Answer 2

To get the kind of indexing you want, you are going to have to use Object.keys. The following should work for an arbitrary object:

var testObj = { a: { b: '2', d: '5', e: { f: '3' } }, c: '3' };

var indexes = [];
var object2ul = function (data) {
    var keys = Object.keys(data);
    var json = "<ul>";
    for (var i = 0; i < keys.length; ++i) { 
        var key = keys[i];
        indexes.push(i);
        json += "<li>" + "<b>" + indexes.join('_') + "</b>" + key;
        if (typeof(data[key]) === 'object') {
            json += object2ul(data[key]);
        } else {
            json += "<ul><li>" + data[key] + "</li></ul>";
        }
        json += "</li>";
        indexes.pop();
    }
    return json + "</ul>";
}

document.body.innerHTML = object2ul(testObj);

Here's it in action:

JSFiddle