Question

我正在使用jQuery Load方法来获取外部JSON。然后尝试将其内容显示为HTML表格。

json文件“product.json”是 -

[
  {
    "User_Name": "John Doe",
    "score": "10",
    "team": "1"
  },
  {
    "User_Name": "Jane Smith",
    "score": "15",
    "team": "2"
  },
  {
    "User_Name": "Chuck Berry",
    "score": "12",
    "team": "2"
  }
]

在我的html页面上我有一个按钮，当点击时，我执行jQuery Load方法将此json读取到div中。然后我必须将这个json显示为HTML表。

HTML页面代码为：

 <button id="productButton">Try</button>
 <div id="productDiv"></div>
 <table>
     <tr>
         <th>User_Name</th>
         <th>score</th>
         <th>team</th>
     </tr>
 </table>

jQuery代码：

$("#productButton").click(function (e) {
   $("#productDiv").load("product.json", function (response, status, xhr) {
       var json = $("#productDiv").html();
       var tr;
       for (var i = 0; i < json.length; i++) {
           tr = $('<tr/>');
           tr.append("<td>" + json[i].User_Name + "</td>");
           tr.append("<td>" + json[i].score + "</td>");
           tr.append("<td>" + json[i].team + "</td>");
           $('table').append(tr);

           if (status == "error")
               $("#textNoData").html("Error: " + xhr.status + ": " + xhr.statusText);
       }
   });
});

附图显示问题 -

json未解析为HTML表格我在表格中未定义。有什么问题？

Answer 1

您将json作为字符串，您必须在

之前解析它

像这样：

 var json = JSON.parse($("#productDiv").html());

Answer 2

$("#productDiv").html()返回一个字符串，而不是JSON对象。您可以使用回调的response参数或JSON.parse($("#productDiv").html())将String转换为JSON对象。

如果您不需要在某处显示JSON文本，您也可以使用$.getJSON()来避免将响应插入到某些DOM元素中。

例如：

$.getJSON("product.json", function(json, status) {
    if (status === "error") {
        $("#textNoData").html("Error: " + xhr.status + ": " + xhr.statusText);
        return;
    }

    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].User_Name + "</td>");
        tr.append("<td>" + json[i].score + "</td>");
        tr.append("<td>" + json[i].team + "</td>");
        $('table').append(tr);
    }
});

Answer 3

不要循环json，而是使用response for for循环，即response[i]。如果在循环之前不起作用，请执行response = JSON.parse('response');

解析JSON到HTML表时获取未定义

3 个答案: