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

Question

[Vpolotske]

В общем имеется код для добавления значений из 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 минута"}

Comments

[0xD34F]

Омерзительно безграмотный вопрос.

1. При чём тут json? Да не при чём. Это характернейший признак абсолютной некомпетентности - путать json и объекты.

2. Зачем тут код ajax-запроса? Какое это имеет отношение к сути вашей проблемы? Никакое - ваша проблема связана с обработкой данных, а не их получением.

3. Говорите, "одинаковые div"... При этом единственный блок, в который вы что-то добавляете, ищется по id. Разметка не показана. Как искать остальные блоки - непонятно (Или у них такой же id? - кстати, я и не удивлюсь, если выяснится, что вы не в курсе про необходимость уникальности id).

4. Что за хрень с отступами - неужели так трудно было нормально отформатировать код?

Глядя на подобные вопросы, хочется дать автору не ответ, а подзатыльник. Учитесь задавать вопросы.

Answer 1

[evkochurov]

"Если имена неправильны - всё неправильно" (с)
В коде у половины переменных имя не соответствует содержанию. Соответственно, непонятно, что Вы имеете ввиду под "первым div": container или itemDiv (который на самом деле button, а не div)?

Покажите руками собранный HTML, который Вы хотите получить в результате работы скрипта, если ему на вход подать приведенный json.

Comments

[Vpolotske]

В общем имеется страница на ней выводится например 5 одинаковых div с разным содержанием. В каждом div имеется кнопка со значением либо купить, либо продать, либо таймер. Вот я хочу посредством ajax обновлять значение кнопки, а точнее таймер каждую секунду

Answer 2

[Александр]

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>`);
        });
    }
});