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

大图：建立一个网站，根据时间段组织恐龙——我学会了如何存储JSON数据文件。正是访问和注入这些数据让我遇到了麻烦

• 我使用的是一个弹出脚本，当单击其中一个列表上的一个项目时会触发该脚本，该项目会弹出以显示有关所选恐龙的数据（src:）

看起来像这样：

• 从这幅图中，您可以看到需要从JSON数据列表中填写的几个字段-在这里，我有几个问题：

• 比如说，如果有100只恐龙，那么存储这些数据最有效的方法是什么？我应该为每一只恐龙的特征单独设置一个JSON txt文件吗

• 我如何链接每个列表项，以便在单击它们时加载适当的数据，而不编写非常冗余的代码
  • 例如，当“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>

T-REX



名称：


期间：



地点：



在中发现：

• 我已经识别了我想要注入代码的每一项

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

• 我知道这个问题涉及面很广，但我非常希望得到一些方向性的建议，比如AJAX是否完全有必要注入这些数据？或者在一个JSON文本文件中存储多个恐龙数据——我假设必须使用REGEXPs对数据进行排序。最大的障碍是如何在不编写大量冗余代码的情况下将每个列表项绑定到JSON数组中的特定数据点

如果有什么用的话，我复制粘贴了大部分页面数据到这个提琴中，但是无法让弹出脚本在其中运行：

您可以使用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); 
  });
});

---

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

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