javascript - 从 JavaScript 对象创建嵌套无序列表(可以是 n 层深)

Question

考虑到下面列出的 JSON 树结构(可以是 n 层深)，我想创建一个嵌套的无序列表

var data = [{
        'text': 'Subjects',
        'data': [{
            'text': 'Geography',
            'data': []
        }, {
            'text': 'History',
            'data': [{
                'text': 'Ancient History',
                'data': []
            }]
        }]
    }, {
        'text': 'Sports',
        'data': []
    }, {
        'text': 'Music',
        'data': []
    }];

数据可以嵌套“n”层。您可以将“数据”包含在“数据”中，而“数据”又包含在另一个“数据”中，依此类推。

输出应该是这样的

<ul>
<li>Subjects
    <ul>
        <li>Geography</li>
        <li>History
            <ul>
                <li>Ancient History
                </li>
            </ul>
        </li>
    </ul>
</li>
<li>Sports
</li>
<li>Music
</li>

function json_tree(object) {
    var json = "<ul>";
    for (prop in object) {
        var value = object[prop];
        switch (typeof(value)) {
            case "object":
                json += "<li>" + value.text + json_tree(value) + "</li>";
                break;
            default:
                json += "<li>" + value.text + "</li>";
        }
    }
    return json + "</ul>";
}

我尝试使用上面的代码，但这不会产生所需的结果。

Answer 1

您当前的逻辑将在 for...in 循环中找到以下键:

0
'text'
'data'

检索 obj[0] 的文本属性按预期工作，但是:

obj['text'].text === undefined
obj['data'].text === undefined

这会给你带来你所看到的糟糕结果( jsFiddle ):

Subjects
    undefined
    undefined
        Geography
            undefined
            undefined
        History
            undefined
            undefined
            Ancient History
                undefined
                undefined
Sports
    undefined
    undefined
Music
    undefined
    undefined

我已更改迭代器以使用简单的 for 循环而不是 for...in。

此外，您可以简化检查，仅查找当前索引对象中的数据长度，以确定是否需要再次递归到 json_tree:

function json_tree(data) {
    var json = "<ul>";

    for(var i = 0; i < data.length; ++i) {
        json = json + "<li>" + data[i].text;
        if(data[i].data.length) {
            json = json + json_tree(data[i].data);
        }
        json = json + "</li>";
    }
    return json + "</ul>";
}

demo fiddle