在HTML中访问特定的JSON值

Question

我有一个像这样的AJAX调用来获取书籍库：

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_bookCount',
  function(data) {
    $("#books").text(data.books);
  });
});

这会产生这样的JSON结果，根据类型对每本书进行计数：

{
  "books": {
    "mystery": 1, 
    "romance": 2, 
    "horror": 0, 
    "fantasy": 3, 
    "biography": 1
  }
}

我想在HTML中显示每种类型的特定计数。这是我到目前为止所做的，但我知道这是不正确的：

<p> <span id="books.mystery"></span> Mysteries<br>
    <span id="books.romance"></span> Romances<br>
    <span id="books.horror"></span> Horrors<br>
    <span id="books.fantasy"></span> Fantasies<br>
    <span id="books.biography"></span> Biographies </p>

这显然不起作用/显示任何东西，我知道这可能是一个简单的问题，但我是新手，我不知道正确的方法。如何从此JSON结果中访问特定值并将其放入我的HTML中？

Answer 1

您分配数据的方式完全错误。

试试这个：

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_bookCount',
  function(data) {
    $.each(data.books, function(key, val) {
      $("#books\\." + key).text(val);
    });
  });
});