javascript - jQuery .each() 仅打印外部 Json 中的最后一项

Question

我正在尝试使用 jQuery 进行测验，并从外部 Json 文件中提取问题和答案。

我的问题是我的 foreach 循环只打印出 Json 项中的最后一个元素。

这是我的 Jquery:

function postData(data) {
var html = "";

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

        html += "<ul><h3><span>" + key + "</span></h3>";

        $.each(value.answers, function(i, j){
            html += "<li>" + j.answer + "</li>";
        });

        html += "</ul>";

});

$('#content').append(html);

};

我的 Json 文件中的数据示例是:

{
"Question Title":
    {
      "answers":
            [{
            "answer" : "answer one",
            "answer" : "answer two",
            "answer" : "answer three",
            "answer" : "answer four"
            }]
    },

"Question title two":
    {
      "answers":
            [{
            "answer" : "True",
            "answer" : "False"
            }]
    }
 }

但是我得到的唯一答案是:

Question title
- answer 4

Question title two
- False

我只是想奇怪地循环遍历它们还是我没有正确打印对象？

如果您需要我澄清任何事情，请告诉我。谢谢。

Answer 1

您的 JSON 存在缺陷，同一对象中存在重复的属性名称。而不是这个:

        [{
        "answer" : "answer one",
        "answer" : "answer two",
        "answer" : "answer three",
        "answer" : "answer four"
        }]

您希望每个答案属性都位于其自己的对象中:

        [
        {"answer" : "answer one"},
        {"answer" : "answer two"},
        {"answer" : "answer three"},
        {"answer" : "answer four"}
        ]

正如您所看到的，您在同一个对象中是重复的属性名称，它只提供最后一个属性的结果，并且实际上是严格模式下的错误(使用严格模式的另一个原因)，因为解释器会标记这个错误给你。

工作演示:http://jsfiddle.net/jfriend00/zesmjgq7/

<小时/>

您可能还应该修复您的 HTML，因为 <ul> 只有几个有效的子对象。 ( <li> 、 <ul> 和 <ol> )和 <h3>不是合法的 child 。您可以输入 <h3>之前<ul>像这样:

html += "<h3><span>" + key + "</span></h3><ul>";