访问 HTML 中的特定 JSON 值答案

【问题标题】：Accessing specific JSON values in HTML访问 HTML 中的特定 JSON 值
【发布时间】：2018-01-02 08:42:27
【问题描述】：

我有一个像这样的 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 中？

【问题讨论】：

标签： html arrays json ajax

【解决方案1】：

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

试试这个：

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

【讨论】：

需要 $("#books\\." + key) 才能让 jQuery 解析句点。
@Mojtaba 你的回答很好，谢谢！它只是缺少 $.each 部分的右括号和分号，但我添加了它并且它工作得很好，谢谢！
@Mojtaba 快速跟进。如果我事先不知道键名，我将如何遍历 json 数组？
@Sarah，我修复了遗漏的部分。我在这里匆匆写下。关于您的问题，根据您提供的代码，循环会自动迭代键。但是，我强烈建议您使用循环、jQuery 选择器和对象进行一些练习。
@Mojtaba 我的意思是在 HTML 中——如果我不知道这些键，我将如何引用它们？是的，我一定会接受你的建议..我是 jQuery/ajax 的新手