解析JSON到HTML表时未定义

I am using jQuery Load method to fetch an external JSON. Then trying to show the contents of it as HTML table.

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

The json file "product.json" is -

“产品的json文件。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"
  }
]

On my html page i have a button, when clicked i do jQuery Load method to fetch this json into a div. Then i have to show this json as HTML table.

在我的html页面上有一个按钮，当我点击时，我使用jQuery Load方法将这个json提取到一个div中。

The HTML page code is:

HTML页面代码为:

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

The jQuery Code:

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);
       }
   });
});

The attached image showing the problem -

所附图片显示的问题-

The json is not parsed to HTML table i get undefined in the table. What is wrong?

json没有解析到表中未定义的HTML表。是什么错了吗?

3 个解决方案

#1

You are getting the json as a string, you have to parse it before

您将json作为一个字符串，您必须先解析它。

Like this:

是这样的:

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

#2

$("#productDiv").html() returns a string, not a JSON object. You could either use the response parameter of the callback or JSON.parse($("#productDiv").html()) to convert the String into a JSON object.

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

If you don't need to display the JSON text somewhere you could also use $.getJSON() instead to avoid inserting the response into some DOM element.

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

For Example:

例如:

$.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);
    }
});

#3

Instead of looping over json, use response in for loop ie response[i]. If that doesn't work, before loop, do response = JSON.parse('response');

与其在json上循环，不如在for循环ie response[i]中使用response。如果不行，在循环之前，do response = JSON.parse('response');

#1