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

Question

更新：我已经改变了这个问题。 即使我确定有两个很好的答案，我也无法弄清楚。 我试图简化这个问题，以便我可以更系统地解决。 我希望这可以帮助像我这样的其他新手...

我想使用isotope.js来显示JSON中的选定数据（此问题与我在此处发布的问题有关）：

从JSON数据创建网格的最佳方法，该方法会根据条目数动态调整大小

我今天一直在阅读有关同位素的信息（我也是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);
        }
    } 
}

编辑：

随意摆弄小提琴来完全按照您的意愿在这里进行操作： http : //jsfiddle.net/92FgL/

Answer 2

如果您想使用更多的jQuery和更少的香草js，则可以执行以下操作：

// document.ready shorhand
$(function() {
  var $container;

  // store destination element
  $container = $('#container');

  $.getJSON('myjson.json', function(data) {
    var items;

    // initialize array where we'll store html
    items = [];

    // loop through ajax response
    $.each(data, function() {
      var html;

      // build player html
      html = "<div class=\"players\" data-name=\"" + data.name + "\"> \
      <p class=\"score\">" + data.score + "</p> \
      <h3 class=\"name\">" + data.name + "</h3> \
      <p class=\"city\">" + data.city + "</p> \
      </div>"

      // add new html onto array
      items.push(html);
    });

    // squish all the html into a string
    items.join('');

    // set the html of the container to the html built above
    $container.html(items);
  });

  $container.isotope({
    itemSelector: '.players'
  });
});

Answer 3

您可以使用jQuery tmpl插件。 它不再开发了，但是效果很好。

https://github.com/jquery/jquery-tmpl

HTML中定义的模板

    <script id="myTmpl" type="x-jquery-tmpl">
        <div class="player" data-name="${name}">
            <p class="score">${score}</p>
            <h3 class="name">${name}</h3>
            <p class="city">${city}</p>
        </div>
    </script>

数据通过jquery推送到tmpl。 注意：您不需要使用$ .each或for遍历数据：您可以推送整个数组，而tmpl插件将处理该数组，并将数据推送到该数组每个条目的模板。

    $.getJSON('myjson.json', function(data) {
         var items = $('#mytmpl').tmpl(data);
         //items is your html object containing a div for each element of data.
         //you can push it to the dom through jQuery 
         //or $container.isotope( 'insert', items );
    });

希望能帮助到你。

请进一步询问是否不清楚。