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

输出：

产品1


产品2


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

这应该产生以下输出：

产品1

产品2


产品3


product 4


产品5



产品6

product 7


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

输出树像对象

2 个答案:

演示