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

大图：建立一个网站，根据时间段组织恐龙 – 我已经学会了如何存储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" } ] 

在弹出窗口中，代码如下：

 
 T-REX 
  
 
 
Name: 
 
 
Period: 
 
 
 
Location(s): 
 
 
Discovered in: 
 
 
  

• 我已经为每个要注入代码的项目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元素非常简单。