Question

我无法找到此代码的错误。我有一个像这样的JSON对象：

{
  "books": [
    { "name": "name1", "price": "price1" },
    { "name": "name2", "price": "price2" },
    { "name": "name3", "price": "price3" },
    { "name": "name4", "price": "price4" },
    { "name": "name5", "price": "price5" }
  ]
}

我希望将这个JSON对象中的书籍放在一个包含2列和行的表中，具体取决于JSON对象的长度。这是我的代码：

var jsonURL = "books.json";
$.getJSON(jsonURL, function(json) {
  var count = 0;

  function allBooks() {
    for (var i = 0; i < json.books.length; i++) {
      if (count == 2) {
        count = 0;
        $('#table > tbody:last').append('<tr></tr>');
      } else
        $('#table > tbody:last-child').append('<td><span>' + json.books[i].name + '</span>' + '<br><span>' + json.books[i].price + '</span></td>');
      count++;
    }
  }
}

这是HTML：

<div>
<button onclick="allBooks()"></button>
<table id="table" >
    <tr>

    </tr>
</table>
</div>

Answer 1

您必须在适当的范围内定义您的功能。

如果你拥有它，allBooks在$.getJSON内定义，因此在onclick 中调用它将无效。

尝试在函数内移动$.getJSON：

function allBooks() {
  var jsonURL = "books.json";
  $.getJSON(jsonURL, function(json) {
    var count = 0;

    for (var i = 0; i < books.length; i++) {
      var book = books[i];
      // Appends a row with two cells to #table
      $('#table').append("<tr><td>"+book.name+"</td><td>"+book.price+"</td></tr>");
    }
  }
}

在表中添加JSON元素

1 个答案: