javascript - 使用 JSON 时出现类型错误

Question

JSON:

{
    "Item 1":[
        {
            "Item 1.1":2,
            "Item 1.2":3
        }
    ],
    "Item 2":[
        {
            "Item 2.1":2,
            "Item 2.2":23
        }
    ]
}

JS:

$.getJSON(jsonPath, function(data, status) {
    var tocHTML = [];
    function eachObj(obj, i) {
        $.each(obj, function(key, value) {
            ++i;
            if (i) {
                tocHTML.push('<li class="item">');
            } else {
                tocHTML.push('<li>');
            }
            if (value != null && Array.isArray(value)) {
                tocHTML.push('<a data-page="' + value[0] + '">' + key + '</a>');
                tocHTML.push('<ul>');
                eachObj(value[1]);
                tocHTML.push('</ul>');
            } else {
                tocHTML.push('<a data-page="' + value + '">' + key + '</a>');
            }
            tocHTML.push('</li>');
        });
    }
    eachObj(data, 0);
    $('#tableOfContents ul.list').html(tocHTML.join(""));
});

错误:

[Error] TypeError: undefined is not an object (evaluating 'e.length')
    each (app.js, line 2)
    eachObj (_init.js, line 223)
    (anonymous function) (_init.js, line 233)
    each (app.js, line 2)
    eachObj (_init.js, line 223)
    (anonymous function) (_init.js, line 241)
    c (app.js, line 3)
    fireWith (app.js, line 3)
    n (app.js, line 4)
    (anonymous function) (app.js, line 4)

无法弄清楚错误的内容，它甚至引用了一个单独的 app.js 文件。

Answer 1

当您的代码发现外部迭代中的条目的值是一个数组时，就会执行此操作:

            tocHTML.push('<a data-page="' + value[0] + '">' + key + '</a>');
            tocHTML.push('<ul>');
            eachObj(value[1]);
            tocHTML.push('</ul>');

该代码打算迭代value[1]，因此它应该是一个对象或数组。但是，在您的 JSON 中:

"Item 1":[
    {
        "Item 1.1":2,
        "Item 1.2":3
    }
],

Item 1 的数组值只有一个条目；在这种情况下，value[1] 将为未定义。这意味着您使用 undefined 作为第一个参数来调用 eachObj()，这将导致 jQuery 的 $.each() 遇到这个问题。