如何从 JSON 响应动态填充 div

Question

我正在尝试构建一个搜索平台。 在搜索结果页面上，我已经有了三个包含相同代码的静态 div 来显示一些内容。

类似的东西；

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

如何循环这个 div 中的内容以使其成为动态的，以便一旦用户点击按钮；

<button id="search" class="btn" value="Search">

这个 div 中的内容是循环的，所以我不必一直添加静态 div。 如何使用 JavaScript 使其动态化？

---

编辑

我现在想知道如何使用与下面的 JSON 响应内容匹配的子代填充 div？就像一个动态加载的列表：

[{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},
{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},
{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}]

div 应该传递来自 JSON 列表的数据，但应该根据来自 JSON 的响应数循环 div。因此，如果 JSON 响应 5 个对象，则 div 应该是 5。

Answer 1

给定一个 JSON Array 对象，您可以：

• 创建字符串文字模板
• .map() 将您的 JSON 数据导入模板 TPL_Results 函数
• 加入映射结果并插入 DOM

const JSON = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": '23:30'
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": '22:00'
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": '23:00'
}];

const TPL_Results = item => `<div class="Results-item">
  <h3 class="Results-itemName">${item.name}</h3>
  <p class="Results-itemLocation"><b>${item.location}</b></p>
  <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
</div>`;

document.querySelector("#results")
	.innerHTML = JSON.map(item => TPL_Results(item)).join('');

<div class="Results" id="results"></div>

Answer 2

如果您想通过单击按钮添加相同的 HTML 元素。请注意，您必须使用 class 而不是 id，因为 id 在文档中必须是唯一的。

您可以尝试以下方法：

var template = `<div class="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>`;
var occurences = 3;
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  for(var i=0; i<occurences; i++){
    strHTML += template;
  }
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>

<button id="search" class="btn" value="Search">Create</button>

更新：

var listArr = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}];
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  listArr.forEach(function(item){
    strHTML += `<div class="Results-item">
            <h4 class="Results-itemName">${item.name}</h4>
            <p class="Results-itemLocation"><b>${item.location}</b></p>
            <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
            </div>`;
  })
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>
<button id="search" class="btn" value="Search">Create</button>

Answer 3

如果您希望附加多张相同内容的卡片，您可以在 javascript 中为一张卡片创建一个通用模板，并将这些卡片中的多个附加到一个容器 div 中。

如果您希望在按钮单击时附加多个相同内容的 div，请使用 for 循环在单击事件之外生成字符串，然后附加生成的字符串。

这里我将容器 div 命名为 .content。另外请注意，每个元素都应该有一个唯一的 id，因此 id 不应该重复。

请参阅下面的工作示例：

let card = 
  `<div class="card">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" class="card_img" alt="result image">
    <h4>OFFLINE</h4>
    <p>Yes!!</p>
   </div>`;

let amount = 10; // amount of cards to add on button click
let toAppend = '';
for(let i = 0; i < amount; i++) {
  toAppend += card;
}

$("#search").click(function() {
  $('.content').empty().append(toAppend);  
});

img {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content"></div>
<button id="search" class="btn" value="Search">Click me</button>

根据您编辑的问题：

您可以使用.reduce 循环遍历您的数据数组，并使用template literals 和destruction 构造一个单独的div 字符串。之后，您可以将这个构造的 div 附加到您的 body 或 div 中（这里我将它附加到类 content 的 div 中）

let data = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
  },
  {
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
  },
  {
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
  }
];

let html = data.reduce((acc, {name,location, meals, close_time: close}) =>
      acc += `
      <div class='item'>
        <p>${name}</p>
        <p>${location}</p>
        <p>${meals}</p>
        <p>${close}</p>
      </div>`
, ``);

$('.content').append(html);

.item {
  border: 1px solid black;
  margin: 10px 0;
}
p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>