Question

我已经编写了以下代码，用于在HTML页面中打印JSON。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $.getJSON("http://localhost:8080/json",function(result){
    $.each(result, function(i, field){
      $("tr").append(field + " ");
    });
  });
});
</script>
</head>
<body>
  <table id="table">
    <tr>
      <th>market</th>
      <th>buy</th>
      <th>sell</th>
      <th>currency</th>
      <th>volume</th>
    </tr>
  </table>
  <div></div>
</body>
</html>

我能够打印JSON Response值，但无法在表格中正确打印它们。

JSON响应格式：

{
  "market": 1309480,
  "buy": 1309480,
  "sell": 1280017,
  "currency": "INR",
  "volume": 2253.4518854
}

目前表格如何：

Answer 1

您需要<td>标记才能在表格中显示内容。 <th>是表头标记。

尝试以下：

$.getJSON("http://localhost:8080/json",function(result){
        var tr = '<tr>';  //create tr tag 
        $.each(result, function(i, field){
            tr += '<td>' + field +'</td>';  //loop through the result and create <td>
        });
        tr += '</tr>';  //close tr tag
        $('#table').append(tr);  // append it to table
}

另外，我很确定你可能需要多个列（即如果结果是多个）。你需要使用2个循环。试试看。创建小提琴以供参考：https://jsfiddle.net/bipen/3prfj474/;）

Answer 2

您可以使用解决方案

var result = {
  "market": 1309480,
  "buy": 1309480,
  "sell": 1280017,
  "currency": "INR",
  "volume": 2253.4518854
};

//$.getJSON("http://localhost:8080/json",function(result){
  $('#table').append('<tr/>');
  $.each(result, function(i, field){
    $('#table').find('tr:last').append('<td>' + field + '</td>');    
  });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>market</th>
    <th>buy</th>
    <th>sell</th>
    <th>currency</th>
    <th>volume</th>
  </tr>
</table>
<div></div>

我刚评论了AJAX电话，请取消注释＆amp;删除结果变量。

首先将tr添加到表格＆amp;然后使用jQuery last选择器获取最后添加的tr＆amp;将表附加到td数据。

希望这会对你有所帮助。

Answer 3

您可以在

中插入标记<td>

$("tr").append(field + " ");

像这样：

$("tr").append("<td>" + field + "</td>");

无法使用jQuery正确打印HTML表中的JSON响应

3 个答案: