TypeError使用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()作为第一个参数调用undefined，这将导致jQuery的$.each()遇到该问题。

Answer 2

尝试使用$.map()

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

var ul = $("<ul class=list />");

ul.appendTo("body");

$.each(data, function(key, value) {

  var html = "<li class=item>" 
             + "<a>" + key + "</a>" + "<ul>" 
             + $.map(value, function(vals, keys) {
                 return $.map(vals, function(v, k) {
                   return "<li><a data-page=" + v + ">" + k + "</a></li>"
                 })
               }).join("") + "</ul>" + "</li>"

  ul.append(html)

});

/*
This is the expected result: stackoverflow.com/questions/31127879/

<ul class="list">
    <li class="item">
        <a data-page="9">Item 1</a>
        <ul>
            <li><a data-page="19">Item 1.1</a></li>
            <li><a data-page="29">Item 1.2</a></li>
            <li><a data-page="39">Item 1.3</a></li>
        </ul>
    </li>
    <li class="item"><a data-page="49">Item 2</a></li>
    <li class="item">
        <a data-page="59">Item 3</a>
        <ul>
            <li><a data-page="69">Item 3.1</a></li>
            <li><a data-page="79">Item 3.2</a></li>
            <li><a data-page="89">Item 3.3</a></li>
        </ul>
    </li>
</ul>
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>