0

Cannot read property 'appendChild' of null

При динамической генерации контента. Через JSON генерирую html, но столкнулся с такой проблемой. В цикле создаю ряд объектов, в которые потом после их создания хочу положить новые, которые так же генерируются. Как решить проблему?

Вот код: http://jsfiddle.net/1nadzv87/12/

Слышал про $().on('event', , ), но не знаю как применить, так, что контент генерировался при загрузке страницы, а не при выполнении какого-то действия.

Знаю, 2 одинаковых запроса, это так для примера, в конечном итоге url'ы разные.

$.getJSON( "http://my-json-server.typicode.com/typicode/demo/posts", function(data){
        var i = -1;
        var s = JSON.stringify(data).match(/"id":/g).length - 1;
        var box = document.getElementById('box');
        var num = new Array();
        var m = 0;
    while (i < s){
            i++;
            num = m;
            m++;
            var obj = document.createElement("div");
            obj.id = data[i].id;
            box.appendChild(obj);

        $.getJSON( "http://my-json-server.typicode.com/typicode/demo/posts", function(data){
          var i = -1;
          var s = JSON.stringify(data).match(/"id":/g).length - 1;
          var box = document.getElementById(num[i]);
          while (i &lt; s){
            i++;
            var obj = document.createElement("div");
            obj.id = data[i].id;
            obj.innerText = data[i].title;
            box.appendChild(obj);
          }

   });
    }




});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">

</div>
Kosta B.
  • 5,821
  • 3
  • 15
  • 24
aSpectro
  • 320

1 Answers1

1

$.getJSON("http://my-json-server.typicode.com/typicode/demo/posts", function(data) {
  console.log("outer data:", JSON.stringify(data));
  var i = -1;
  var s = JSON.stringify(data).match(/"id":/g).length - 1;
  var box = document.getElementById('box');
  var num = new Array();
  var m = 1;
  while (i < s) {
    i++;
    num.push(m);
    m++;
    var obj = document.createElement("div");
    obj.id = data[i].id;
    box.appendChild(obj);

$.getJSON("http://my-json-server.typicode.com/typicode/demo/posts", function(data) {
  var i = 0;
  var s = JSON.stringify(data).match(/"id":/g).length - 1;
  console.log(num[i]);
  var box = document.getElementById(num[i]);
  while (i &lt; s) {
    i++;
    var obj = document.createElement("div");
    obj.id = data[i].id;
    obj.innerText = data[i].title;
    box.appendChild(obj);
  }

});



}


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">

</div>
  • а что было не так, сейчас данные записывает, но все в первый блок, и начиная с id=2, т. е. пропускает первый объект и записывает оставшиеся 2? – aSpectro Aug 01 '18 at 15:26
  • "а что было не так" - Вы не видите разницы между Вашим кодом и моим? –  Aug 01 '18 at 15:27
  • разница мне ясна, но я не могу ее осмыслить, почему во втором цикле при создании объектов не создается объект с id = 1, а только с id = 2 и 3? data[i] начинает отсчет с 1, а не с 0, если я приравниваю i к -1, то js опять ругается – aSpectro Aug 01 '18 at 15:37
  • @aSpectro что делает вот эта строчка? var s = JSON.stringify(data).match(/"id":/g).length - 1; –  Aug 01 '18 at 15:39
  • я получаю число элементов id из json, чтобы воспроизвести цикл нужное число раз и не создать больше объектов, чем их есть – aSpectro Aug 01 '18 at 15:41
  • @aSpectro зачем второй $.getJSON вызывается в цикле, если запросы (и ответы) в нем абсолютно одинаковые? –  Aug 01 '18 at 15:49
  • это для примера, для второго запроса у меня другой url – aSpectro Aug 01 '18 at 15:53
  • @aSpectro Вчитайтесь в мой предыдущий комментарий. Подумайте. –  Aug 01 '18 at 15:54
  • Давайте продолжим обсуждение в чате. – aSpectro Aug 01 '18 at 16:16