Output Tree Like Object

Question

I'm working on a function that is outputting a tree-like object with unknown depth.

This is what I have so far:

function recursive(obj) {
    if ($.type(obj.children) == 'undefined') {
        return "<ul><li>"+obj.name+"</li></ul>";
    }

    return "<ul><li>" +obj.name+"</li>" + recursive(obj.children) + "</ul>";
}

var x = recursive(obj1);
console.log(x);

This works well for objects that have no siblings, like this one:

var obj1 = {
    name:'product 1',
    children: {
        name:'product 2',
        children: {
            name:'product 3'  
        }
    }
}

It outputs:

product 1

product 2

product 3

What I need is a recursive function (with a loop inside I guess) that is able to output arrays of objects too. The siblings basically.

Here's an example object and the output I'm trying to achieve:

var tree = 
[{
        name:'product 1'
    }, {
        name:'product 2',
        children: [{
            name:'product 3',
            children: {
                name:'product 4',
                children: {
                    name:'product 5'   
                }
            }
        }, {
            name:'product 6'   
        }, {
            name:'product 7'   
        }]
    }, {
        name:'product 8'   
}];

That should produce the following output:

product 1

product 2

product 3

product 4

product 5

product 6

product 7

product 8

Can anyone help? Thank you.

This might help: [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Mar 27 '16 at 16:59
Take a look at this - I used it for reference when I had exactly the same question: http://stackoverflow.com/questions/19003285/creating-a-menu-from-json — StudioTime, Mar 27 '16 at 17:23

John Slegers · Answer 1 · 2016-03-27T18:25:06.657

This function allows you to build your tree recursively :

function recursive(obj) {
    var ret = [];
    if(Array.isArray(obj)) {
        for(var i = 0, length = obj.length; i < length; i++) {
            ret.push(recursive(obj[i]));
        }
    } else {
        ret.push('<li>'+obj.name);
        if (typeof obj.children !== 'undefined') {
            ret.push('<ul>' + recursive(obj.children) + '</ul>');
        }
        ret.push('</li>');
    }
    return ret.join('');
}

Demo

var tree = [{
    name:'product 1'
}, {
    name:'product 2',
    children: [{
        name:'product 3',
        children: {
            name:'product 4',
            children: {
                name:'product 5'   
            }
        }
    }, {
        name:'product 6'   
    }, {
        name:'product 7'   
    }]
}, {
    name:'product 8'   
}];

function recursive(obj) {
    var ret = [];
    if(Array.isArray(obj)) {
        for(var i = 0, length = obj.length; i < length; i++) {
            ret.push(recursive(obj[i]));
        }
    } else {
        ret.push('<li>'+obj.name);
        if (typeof obj.children !== 'undefined') {
            ret.push('<ul>' + recursive(obj.children) + '</ul>');
        }
        ret.push('</li>');
    }
    return ret.join('');
}

document.body.innerHTML = '<ul>' + recursive(tree) + '</ul>';

(see also this Fiddle)

Thanks for the effort! The structure was a bit off, seems like you corrected it though (and some comas appeared). Well, can only accept one answer. — Ivannnnn, Mar 27 '16 at 17:58
At the time I couldn't because I didn't have enough points (15 required). But I just got five for completing some milestone so I now can. — Ivannnnn, Mar 27 '16 at 18:40

Nina Scholz · Accepted Answer · 2016-03-27T17:48:01.350

This solution works recursive with a function which iterates over the given array and makes the wanted make up. If the parameter is not an array, then it make an array out of it and iterates with this array.

function getTree(array) {
    return '<ul>' + (Array.isArray(array) ? array : [array]).map(function (a) {
        var r = a.name;
        if ('children' in a) {
            r += getTree(a.children);
        }
        return '<li>' + r + '</li>';
    }).join('') + '</ul>'
}


var tree = [{ name: 'product 1' }, { name: 'product 2', children: [{ name: 'product 3', children: { name: 'product 4', children: { name: 'product 5' } } }, { name: 'product 6' }, { name: 'product 7' }] }, { name: 'product 8' }];
document.write(getTree(tree));

Fantastic, very impressed. Thank you very much! – Ivannnnn Mar 27 '16 at 17:54 — Ivannnnn, Mar 27 '16 at 17:54

Output Tree Like Object

2 Answers2

Demo