javascript - 使用 JSON 文件动态更新 HTML 内容？

Question

我想创建一个 JS 循环(使用 jQuery)来查看 JSON 文件并根据 <div> 是否将适当的内容添加到 HTML 文件中。 ID 匹配 JSON“id”值。无论有多少<div>，这都需要易于扩展和工作。添加框。

---

我有一个 HTML 文件设置如下:

    <div class="box" id="1">
        <h1></h1>
        <hr/>
        <p></p>
    </div>
    <div class="box" id="2">
        <h1></h1>
        <hr/>
        <p></p>
    </div>
    <div class="box" id="3">
        <h1></h1>
        <hr/>
        <p></p>
    </div>

还有一个单独的 JSON 文件，其中包含每个框元素的值:

{
    "content": [
        {
            "id": 1,
            "header": "Box 1",
            "para": "This is Box 1",
            "other": "Another key that's not necessarily used for all boxes"
        },
        {
            "id": 2,
            "header": "Box 2",
            "para": "This is Box 2"
        },
        {
            "id": 3,
            "header": "Box 3",
            "para": "This is Box 3",
            "other": "Another key that's not necessarily used for all boxes"
        }
    ]
}

基本上这是我正在寻找的结果(添加了一些基本的 CSS 样式)，使用以下脚本创建，但显然每次新的 <div> 时都必须更改此代码已添加，因此不可扩展:

$.getJSON('content.json', function (data) {

     "use strict";

     var content = data.content;

     $('#1 h1').html(content[0].header);
     $('#2 h1').html(content[1].header);
     $('#3 h1').html(content[2].header);

     $('#1 p').html(content[0].para);
     $('#2 p').html(content[1].para);
     $('#3 p').html(content[2].para);

});

将不胜感激详细的答案，因为我对 JS 和 JSON 还很陌生，还没有找到任何可以准确解释我正在努力实现的目标。

谢谢! :)

Answer 1

让我们把它拉大一点。

我们将使用 HTML 模板，然后尽可能多地解耦结构以插入数据。例如，如果我们决定将 h1 更改为 h2，我们不想深入研究 javascript。

我也将其包装在一个列表中，因为我们拥有的是一个框列表。不过，这完全是可选的。

/*GOing to hide the AJAX Call for the demo */
/*$.getJSON('content.json', function(data) {
  "use strict";

  var content = data.content;
*/

//Dummy Dump of our data;
var content = [{
    "id": 1,
    "header": "Box 1",
    "para": "This is Box 1",
    "other": "Another key that's not necessarily used for all boxes"
  },
  {
    "id": 2,
    "header": "Box 2",
    "para": "This is Box 2"
  },
  {
    "id": 3,
    "header": "Box 3",
    "para": "This is Box 3",
    "other": "Another key that's not necessarily used for all boxes"
  }
];


//Set Up the template
var s = $("#boxTemplate")[0].innerHTML.trim();
var holder = document.createElement('div');
holder.innerHTML = s;
var boxTemplate = holder.childNodes

content.forEach(obj => {
  //Clone Template
  var newItem = $(boxTemplate).clone();
  //Populate it
  $(newItem).find(".head").html(obj['header']);
  $(newItem).find(".bodyContent").html(obj['para']);
  //Append it
  $("#boxes").append(newItem);
});

/*
What would be the closure of the Ajax call
});
*/

#boxes {
  list-style-type: none;
  padding: 0;
}

#boxes li {
  width: 33%;
  float: left;
  border: 1px solid black;
}

#boxes>li:nth-child(3n+1) {
  border-right: none;
}

#boxes>li:nth-child(3n+3) {
  border-left: none;
}

#boxes .head {
  border-bottom: 2px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="boxes">
</ul>
<!-- Ideally we'd use the new <template> tag here but IE support is no good -->
<script type="text/template" id="boxTemplate">
  <li>
    <h1 class="head"></h1>
    <p class="bodyContent">
  </li>
</script>