@Vpolotske

Как добавить значения из json в одинаковые div?

В общем имеется код для добавления значений из json в div блоки:
$(document).ready(function(){
	$.ajax({
        url: 'ajax/prop',
		dataType: 'html',
        success:function(data){
		var jsonStr = JSON.parse(data);
 const container= document.getElementById('prop');
  jsonStr.forEach(function(item) {
  const itemDiv = document.createElement('button');
  itemDiv.classList.add('btn');
  itemDiv.id = item.id;
  let innerHtml = '<dl>';
  Object.keys(item).forEach(function(key) {
    innerHtml += `
      <dd>${item[key]}<dd>
    `;
  });
  innerHtml += '</dl>';
  itemDiv.innerHTML = innerHtml;
  container.appendChild(itemDiv);
});
}
});


Но проблема в том что все значения добавляются только в первый div, а мне нужно что бы первое значение из json добавилось в первый div, второе во второй и т.д.
Вот строка из json.
{"id":"1","time":"2 минуты"},{"id":"2","button":"Купить"},{"id":"3","back":"Вернуть"},{"id":"4","time":"1 минута"}
  • Вопрос задан
  • 571 просмотр
Пригласить эксперта
Ответы на вопрос 2
@evkochurov
"Если имена неправильны - всё неправильно" (с)
В коде у половины переменных имя не соответствует содержанию. Соответственно, непонятно, что Вы имеете ввиду под "первым div": container или itemDiv (который на самом деле button, а не div)?

Покажите руками собранный HTML, который Вы хотите получить в результате работы скрипта, если ему на вход подать приведенный json.
Ответ написан
var let const
document.getElementById и Jquery...
на сколько я могу видеть вы вообще не понимаете чего пишите.
Как там должно работать тоже не понятно (лучше сверстать все на jsfiddle.net с json данными, и показать как это работает, и какие ожидания), но исходный код должен выглядеть примерно так:

$.ajax({
    url: 'ajax/prop',
    dataType: 'html',
    success: function (data) {
        let $container = $('#prop');
        JSON.parse(data).forEach(item => {
            let html = '<dl>';
            Object.keys(item).forEach(key => html += `<dd>${item[key]}<dd>`);
            html += '</dl>';
            $container.append(`<button class="btn" id="${item.id}">${html}</button>`);
        });
    }
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы