0

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

我想使用 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 不需要对每条记录重复，所有的记录都会显示在容器内（我想不用多说）...

我已经尝试使用下面的答案（它回答了我之前如何问这个问题）来做这件事，但是这样做时，我要么什么都没有返回（控制台中也没有错误），要么我得到了一个看起来像空表格单元格的东西。

任何帮助是极大的赞赏。我对回复的两位用户感到非常抱歉，感谢您的帮助，我将继续使用您的答案，希望我能弄明白。

4

3 回答 3

3

创建一个函数，其作用是接受来自 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/

于 2013-01-04T03:42:56.573 回答
1

如果你想使用更多的 jQuery 和更少的 vanilla 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'
  });
});
于 2013-01-04T04:07:49.083 回答
0

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

希望能帮助到你。

如果不清楚，请进一步询问。

于 2013-01-23T15:09:20.677 回答