Помогите исправить данный код

148

23 июня 2019, 02:30

Имеется код для добавления данных из json в div блоки с одинаковым классом и с уникальным id. Но он не работает. В чем проблема?

$.ajax({
url: 'ajax/prop',
dataType: 'html',
success:function(data){
var jsonStr = JSON.parse(data);
console.log(jsonStr);
    $('.prop').each(function (index, element) {
          var container = $(this).attr('id');
          console.log(index, container);
     jsonStr.forEach(item => {
let innerHtml = '';
Object.keys(item).forEach(function(key) {
innerHtml += `<dd>${item[key]}<dd> `;
});
let $btn = $('<button type="submit"></button>').
attr("id", "btn_" + item.id).addClass("btn btn-warning btn-md").html(innerHtml);
$("#prop_" + item.id).html($btn);
  });
    return false
 });
}
});
0: {id: "1", profit: "Продать"}
1: {id: "2", profit: "Продать"}
2: {id: "3", timeleft: "9 минут"}
3: {id: "4", timeleft: "2 часа 9 минут"}
4: {id: "5", timeleft: "5 часов 30 минут"}
5: {id: "9", profit: "Купить"}
6: {id: "11", timeleft: "23 часа 9 минут"}
0 "1"
1 "2"
2 "3"
3 "4"
4 "5"
5 "9"
6 "11"

Спасибо за помощь решил проблему, исправленный код в вопросе.

Answer 1

$('#' + container).append(itemBtn);

Обратите внимание: выборка $('#' + container) содержит тот же самый элемент, что и $(this). Если, конечно, на странице нет повторяющихся id.

Совет дня:

Не смешивайте манипуляции с элементами DOM-дерева в чистом javascript-е, с аналогичными манипуляциями в jQuery.

Хм, добавьте:

var jsonStr = JSON.parse(data);
console.log(jsonStr);

var container = $(this).attr('id');
console.log(index, container);

Что в консоли?

Я все понял. Когда Вы добавляете кнопки, Вы присваиваете им такие же id, как у элементов с классом "prop". Поэтому селектор $('#' + container) находит не div, a button, добавленный в первый div. Визуально, это выглядит как если бы все было добавлено в первый div.

var jsonStr = [ 
  { id: "1", profit: "Продать" }, 
  { id: "2", profit: "Продать" }, 
  { id: "3", timeleft: "9 минут" }, 
  { id: "4", timeleft: "2 часа 9 минут" }, 
  { id: "5", timeleft: "5 часов 30 минут" }, 
  { id: "9", profit: "Купить" }, 
  { id: "11", timeleft: "23 часа 9 минут" } 
]; 
 
jsonStr.forEach(item => { 
  let innerHtml = ''; 
  Object.keys(item).forEach(function(key) { 
    if (key != "id") 
      innerHtml += `<dd>${item[key]}<dd> `; 
  }); 
 
  let $btn = $("<button></button>"). 
    attr("id", "btn_" + item.id).addClass("btn").html(innerHtml); 
  $("#prop_" + item.id).append($btn); 
});

.prop { 
  border: 1px solid black; 
  background: lightgreen; 
  margin: 5px; 
  padding: 3px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="prop_1" class="prop"></div> 
<div id="prop_2" class="prop"></div> 
<div id="prop_3" class="prop"></div> 
<div id="prop_11" class="prop"></div>