javascript - JSON，转换为 HTML 以与 Isotope.js 一起使用

Question

更新:我已经改变了这个问题。尽管我确信我得到了两个很好的答案，但我无法弄清楚。我试图简化这个问题，以便我能够以更有条理的方式解决它。我希望这可以帮助像我这样的其他新手......

我想使用 isotope.js 显示 JSON 中选定的数据(这个问题与我在此处发布的问题相关):

Best way to create grid from JSON data which dynamically resizes based on number of entries

我今天一直在阅读有关同位素的内容(我也是 Javascript 的新手)，我相信这个问题对你们很多人来说似乎很简单。无论如何，这里...

据我所知，我需要将这种格式的 html 提供给同位素(这取自此处找到的同位素基本示例 - https://github.com/DaweiCheng/isotope-tutorial/blob/master/basic.html ):

<div class="element other nonmetal   " data-symbol="H" data-category="other">
      <p class="number">1</p>
      <h3 class="symbol">H</h3>
      <h2 class="name">Hydrogen</h2>
      <p class="weight">1.00794</p>
    </div>

所以，如果我有一个像这样的 JSON(请假设多个相似的记录):

[{"name":"Hydrogen","number":1,"symbol":"H","weight":1.00794},{"name":"Helium","number":2,"symbol":"He","weight":4.002602},{"name":"Lithium","number":3,"symbol":"Li","weight":6.941},{"name":"Beryllium","number":4,"symbol":"Be","weight":9.012182},{"name":"Boron","number":5,"symbol":"B","weight":10.811},...]

*请注意，JSON 中任何数字字段都是整数，而不是字符串。

我想把 JSON 变成这样:

<div id="container">

<div class="element">
<p class="number">1</p>
<h3 class="symbol">H</h3>
<h2 class="name">Hydrogen</h2>
<p class="weight">1.00794</p>
</div>
<div class="element">
...
</div>

</div>

如何将 JSON 转换为所需的 HTML？

为了让事情变得简单(对我来说)，我希望每个记录的 div 类始终是元素(这样当我学习更改同位素时，我可以首先使用他们教程中的 css 开始)。容器div不需要为每条记录重复，所有记录都会显示在容器内(我想这不需要说)...

我尝试使用下面的答案(回答了我之前问这个问题的方式)，但是这样做时我要么没有返回任何内容(并且控制台中没有错误)，要么得到看起来像空表的内容细胞。

非常感谢任何帮助。我对两位回复的用户感到非常抱歉，感谢您的帮助，我将继续研究您的答案，希望能找到答案。

Answer 1

创建一个函数，其作用是接受 Ajax 的结果，并迭代每个对象，从中获取必要的数据并输出包含所需信息的 div。

例如:

function renderUser(ajaxResponse) {

    // turn string response to JSON array
    var responseArray = JSON.parse(ajaxResponse);

    // make sure there is a response
    if (responseArray.length > 0) {

        // get container
        var container = document.getElementById("container");

        // iterate over each response
        for (var i = 0; i < responseArray.length; i += 1) {

            // create the elems needed
            var player = document.createElement("div");
            player.className = "players";
            player.data-Name = responseArray[i].name;

            var score = document.createElement("p");
            score.className = "score";
            score.innerHTML = responseArray[i].score;

            var name = document.createElement("h3");
            name.className = "name";
            name.innerHTML = responseArray[i].name;

            var city= document.createElement("p");
            city.className = "city";
            city.innerHTML = responseArray[i].city;

            // append them all to player wrapper
            player.appendChild(score);
            player.appendChild(name);
            player.appendChild(city);

            // append player to container
            container.appendChild(player);
        }
    } 
}

编辑:

冒昧地制作了一个 fiddle 来完全按照您的要求进行操作:http://jsfiddle.net/92FgL/