Как динамически заполнить div из ответа JSON

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>

Как зациклить содержимое этого элемента, чтобы оно стало динамическим, чтобы пользователь нажимал кнопку;

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

Содержимое этого цикла div, поэтому мне не нужно постоянно добавлять статические div.Как мне сделать его динамическим с помощью JavaScript?

---

РЕДАКТИРОВАТЬ

Теперь мне интересно, как заполнить div дочерними элементами, соответствующими содержимому JSONответ ниже?Как динамически загружаемый список:

[{
    "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, но div должен быть зациклен в соответствии с номером ответа от JSON.Так что, если JSON отвечает 5 объектами, div должен быть 5.

Answer 1

Если вы хотите добавить тот же элемент 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 2

Учитывая JSON Массив объектов, вы можете:

• Создать строковый литерал Template
• .map() ваших данных JSON в шаблоне TPL_Results function
• Присоединить сопоставленный результат и вставить в 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 3

Если вы хотите добавить несколько карт одного и того же контента, вы можете создать общий шаблон для одной карты в javascript и добавить несколько этих карт в контейнерную ячейку.

Если вы хотите добавить несколько делений одного и того же содержимого при нажатии кнопки, сгенерируйте строку вне события click с помощью цикла for, а затем добавьте сгенерированную строку.

Здесь я назвалконтейнер div .content.Также обратите внимание, что каждый элемент должен иметь уникальный идентификатор, поэтому идентификаторы не должны повторяться.

См. Рабочий пример ниже:

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 и создание строки из отдельных элементов div с использованием литералов шаблона и уничтожения .После этого вы можете добавить этот созданный div к вашему телу или div (здесь я добавил его к div с классом content)

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>