输出树状对象

Question

我正在开发一个输出深度未知的树状对象的函数。

这是我目前拥有的：

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);

这适用于没有兄弟姐妹的对象，例如：

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

它输出：

product 1

product 2

product 3

我需要的是一个能够输出对象数组的递归函数（我猜里面有一个循环）。基本上是姐弟俩。

这是一个示例对象和我试图实现的输出：

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'   
}];

这应该产生以下输出：

product 1

product 2

product 3

product 4

product 5

product 6

product 7

product 8

有人可以帮忙吗？谢谢。

Answer 1

此函数允许您递归构建树：

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('');
}

演示

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>';

（另见 this Fiddle）

Answer 2

此解决方案使用一个函数递归工作，该函数遍历给定数组并进行所需的组合。如果参数不是数组，那么它会从中创建一个数组并使用该数组进行迭代。

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));

输出树状对象

Output Tree Like Object

javascript

tree

jquery

list

演示