如何将特定的 JSON 数据注入 HTML 元素？答案

【问题标题】：How to inject specific JSON data into an HTML element?如何将特定的 JSON 数据注入 HTML 元素？
【发布时间】：2015-10-28 10:38:52
【问题描述】：

大图：建立一个网站来根据时间段组织恐龙 - 我已经学会了如何存储 JSON 数据文件。我遇到问题的是访问和注入这些数据。

我正在使用一个弹出脚本，当单击其中一个列表中的项目时触发该脚本，该脚本会弹出以显示有关所选 Dino 的数据（src：http://dev.vast.com/jquery-popup-overlay/）

看起来像这样：

从这张图片中，您可以看到需要从 JSON 数据列表中填写一些字段 - 从这里我有几个问题：
1. 假设有 100 只恐龙 - 存储这些数据的最有效方法是什么？我应该为每个恐龙的特征创建一个单独的 JSON txt 文件吗？
2. 如何链接每个列表项，以便在单击它们时加载正确的数据而不编写非常冗余的代码？
  - 例如，当“name_open”类添加到被点击的 HTML 元素时，弹出脚本会触发 - 我可以做一些类似的事情来注入我的 JSON 数据吗？

存储的 JSON 数据是这样的：

[
{
    "name": "T-REX" ,
    "period": "85-65 million years",
    "location": "Montana, USA",
    "discovered": "1902"
}
]

弹窗内代码如下：

<h3 id = "d-title"> T-REX </h3>
<img id = "d-photo" src = "#" />
<ul>
    <br>
    <li>Name: <p id = "name"></p></li> <br>
    <li>Period: <p id = "period"></p> </li>               
    <br>
    <li>Location(s): <p id = "location"></p></li>
    <br>
    <li>Discovered in: <p id = "discovered"></p> </li> 
    <br>
</ul>

我已经标识了我想要注入代码的每个项目。

那么，再说一遍 - 我如何注入我的数据，以及存储大量数据的有效方法是什么？

我知道这个问题很宽泛，但我真的很感激一些指导性的建议，比如 AJAX 是否完全需要注入这些数据？或者无论如何将多个恐龙的数据存储在一个 JSON 文本文件中 - 我假设必须使用 REGEXP 对数据进行排序。最大的障碍是如何在不编写大量冗余代码的情况下将每个列表项绑定到 JSON 数组中的特定数据点。

如果有任何用处，我将大部分页面数据复制粘贴到这个小提琴中，但是无法让弹出脚本在其中运行：https://jsfiddle.net/evanbananas/ssgeLpox/1/

【问题讨论】：

标签： javascript jquery html ajax json

【解决方案1】：

你可以使用 jQuery.getJSON() 方法！

例如：

$.getJSON( "stored/test.json", function( data ) {
  $.forEach(data, function(d, i) {
     $('#name').html(d.name);
     $('#period').html(d.period);
     $('#location').html(d.location);
     $('#discovered').html(d.discovered); 
  });
});

【讨论】：

所以我需要将这些函数之一绑定到每个恐龙元素，但只需将数据 [0] 更改为 1、2、3 等。对于我想要的特定数据使用。
您可以在 getJSON 函数内的数据对象中使用 forEach（编辑代码示例）

【解决方案2】：

你也可以使用 AngularJS。使用 JSON 数据并将每个值放入任何 html 元素中非常简单。

【讨论】：