загрузка данных из JSON при щелчке

[pensill]

Хелп.
Имеется следующее:
При загрузке страницы загружается информация по товарам из JSON (это реализовано)

var request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  request.open('GET', 'js/info.json');
  request.onreadystatechange = function() {
    if ((request.readyState===4) && (request.status===200)) {
        var items = JSON.parse(request.responseText);

        for (var key in items) {
          var output = '<div class="goods__item" id=' + key + '>';
          output += '<img class="goods__img" src="img/' + items[key].url_small +'.jpg" />';
          output += '<div class="goods__info">';
          output += '<h2 class="goods__h2">' + items[key].name + '</h2>';
          output += '<div class="goods__desc">' + items[key].short_desc + '</div>';
          output += '</div>';
          output += '</div>';

          $('#goods_container').append(output);    // ЗАГРУЗКА ТОВАРОВ ИЗ JSON ПРИ ЗАГРУЗКЕ СТРАНИЦЫ (для каждого товара создается div своим ip (ip равен key))


          $('#' + key ).bind('click',  function(){
            console.log(items);  // в консоль выводятся нормально все объекты
            var out = '<ul class="result">';
                
                
                  out += '<p>' + items[key].name + '</p>';
                out += '</ul>';

            $('#update').html(out);  /// проблема с этой частью кода. Мне нужно реализовать, чтобы при щелчке по divу (тому диву который равен key ) с определенным товаром, выводилось в модальное окно вся информация о товаре, у меня сейчас загружается данные о последнем товаре в файле JSON
          });
        }
          
        }
      }
request.send();

И еще, правильно ли я делаю что использую .bind для отслеживания щелчка - так как на момент загрузки страницы этих divов нету

[laimas]

div своим ip (ip равен key)

А что такое есть ip?

[pensill]

div своим ip (ip равен key)

А что такое есть ip?

В моем случае дивы будут иметь следующие id: 0, 1, 2, 3 (всего 4 шаблонных товара).
Или я не правильно понял вопрос?

[laimas]

ID, это уже ближе к истине, но имена переменных, имена идентификаторов не должны начинаться с цифры.
Более того, уникальный идентификатор товара в базе (да и вообще любой записи) равный 0, это нонсенс, откуда вы такой выцарапали?

[pensill]

ID, это уже ближе к истине, но имена переменных, имена идентификаторов не должны начинаться с цифры.
Более того, уникальный идентификатор товара в базе (да и вообще любой записи) равный 0, это нонсенс, откуда вы такой выцарапали?

Я это сделал для того, чтобы каждому диву с товаром присвоить уникальный id, могу сделать, чтобы были например были такие id #con_0 #con_1 #con_2 #con_0 /

Более того, уникальный идентификатор товара в базе (да и вообще любой записи) равный 0, это нонсенс, откуда вы такой выцарапали?

0 - это key первого товара в файле JSON.

Но вопрос сейчас не в этом, а том, почему при щелчке по определенному диву с информацией о товаре - в модальное окно загружается не информация по этому же товару из JSON, а информация последнего товара в файле json

[pensill]

var output = '<div class="goods__item" id="container_'+ key +' ">';

Вот теперь id это : container_0 container_1 container_2 container_3

Но суть проблема у меня в другом

[laimas]

Потому, что это проход в цикле, последнее значение которого и в конечном итоге будет прописано как параметр. Если устанавливать обработчик по key в цикле, то нужно его устанавливать здесь:

$('#goods_container').append(output);

Только добавляя его таким образом:

$(output).appendTo('#goods_container').on('click', function() {
тогда здесь можно использовать key
});

Либо после цикла делегировать обработку щелчков элементу goods_container, а ключ получать из id текущего элемента.

[pensill]

Либо после цикла делегировать обработку щелчков элементу goods_container, а ключ получать из id текущего элемента.

Сделал. Примерно как ты говорил, вот код:

$('#container_' + key).bind('click', function(){
            var id = $(this).attr('id').charAt(10);
            var out = '<ul class="result">';
                  out += '<p>' + items[idd].name + '</p>';
                out += '</ul>';

            $('#update').html(out);

[laimas]

Тогда лучше в цикле сформировать html, после цикла его вставить в родительский элемент, и делегировать ему обработку.