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

Question

大图：建立一个基于时间段组织恐龙的网站 - 我已经学会了如何存储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>

• 我已经为每个要注入代码的项目ID了。

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

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

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

Answer 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); 
  });
});

Answer 2

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