Question

我想创建一个JS循环（使用jQuery），它查看JSON文件，并根据<div> ID是否与JSON“id”值匹配，将相应的内容添加到HTML文件中。无论添加了多少<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文件，其中包含每个box元素的值：

{
    "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

您想要使用的是forEach循环，这样您就不必关心json文件的内容数组有多长：

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

     "use strict";

     var content = data.content;
     content.forEach(e => {
        $("#"+e.id+" h1").html(e.header)
        $("#"+e.id+" p").html(e.para)
     });
});

这是一个工作小提琴：https://jsfiddle.net/qsrehpa2/1/

Answer 2

您可以使用当前对象遍历内容以填充元素：

$.getJSON('content.json', function(data) {
  "use strict";

  var content = data.content;

  content.forEach(obj => {
    $(`.box#${obj['id']}`)
      .find('h1').text(obj['header']).end()
      .find('p').text(obj['header']);
  });
});

以下是不使用json的本地副本的外观：

＆＃13;

const 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"
  }
];

content.forEach(obj => {
  $(`.box#${obj['id']}`)
    .find('h1').text(obj['header']).end()
    .find('p').text(obj['para']);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

＆＃13;

Answer 3

您提到您希望您的解决方案具有可扩展性，因此我编写了jQuery代码，以便它自动为您创建HTML。

// Download the JSON file
$.getJSON("content.json", function (data) {
    // Loop through each JSON item
    $.each(data.content, function (index, item) {
        // Create and append HTML tags filled out with the data
        $("body").append(
             $("<div>")
                .attr("id", item.id)
                .append($("<h1>").text(item.header))
                .append($("<hr>"))
                .append($("<p>").text(item.para)));
     });
});

Answer 4

让我们把它拉出来吧。

我们将使用HTML模板，然后尽可能多地分离结构以插入数据。如果我们决定将h1更改为h2，我们不想继续浏览javascript。

我还把它包装在一个列表中，因为我们有一个盒子列表。这纯粹是可选的。

＆＃13;

/*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
});
*/

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: