javascript - 迭代嵌套的数字键控 json 对象

Question

这可能是重复的，但我还没有找到解决我的问题的方法，尽管我已经检查了许多其他 JSON 递归遍历函数的示例。

我的 json obj 看起来有点像下面这样:

var obj = 
{
    "description": [
    {
        "list": [
            {
                "1": "here is text"
            },
            {
                "2": "other text"
            },
            {
                "3": "arbitrary text"
            },
            {
                "4": [
                    {
                        "1": "indented"
                    },
                    {
                        "2": {
                            "1": "indented to second level"
                        }
                    },
                    {
                        "3": "first indentation level again"
                    },
                    {
                        "4": {
                            "1": "second level again"
                        }
                    },
                    {
                        "5": "and first level, to wrap things up"
                    }
                ]
            }
        ]
    }
]
};

用类似的东西遍历它:

function recurTrav (jsonObj) {
    $.each(jsonObj.description[0], function (key, value) {

        $(".testul").append("<li class=" + key + ">" + value + "</li>");

        if (typeof(jsonObj[key] == "object")) {
            recurTrav(jsonObj[key]);
        }
    });
}
recurTrav(obj);

没有给我任何东西。 (请注意，这只是为了测试我将如何遍历。我被卡住了，这很尴尬。

我想我只需要朝正确的方向插入......

我实际上想做的是将其创建为无序列表结构。主 ul 内可以有 ul。

<ul>
    <li>here is text</li>
    <li>other text</li>
    <li>arbitrary text</li>
    <li>
        <ul>
            <li>indented</li>
            <li>
                <ul>
                    <li>indented to second level</li>
                </ul>
            </li>
            <li>first indentation level again</li>
            <li>
                <ul>
                    <li>second level again</li>
                </ul>
            </li>
            <li>and first level, to wrap things up</li>
        </ul>
    </li>
</ul>

Answer 1

我的处理方式略有不同。首先，我会做 recurTrav()返回 DOM 树。在最简单的情况下，它只是平坦的 <ul></ul> 。如果遇到嵌套列表，它将内部递归的结果包装在 <li></li> 中.

所以...

function recurTrav(jsonObj) {
    var cont = $('<ul/>');

    $.each(jsonObj, function (key, value) {
        var el = $('<li/>');

        if (typeof(jsonObj[key]) == "object") {
            el.append(recurTrav(value));
        } else {
            el.attr('class', key);
            el.html(value);
        }

        cont.append(el);
    });

    return cont;
}

var dom = recurTrav(jsonObj.description[0].list);