Javascript Для дочернего цикла, добавляющего только дочерний элемент, добавляет первый элемент, затем выдает ошибку

Question

Я перебираю объект js с вложенным циклом цикла, указанным ниже, он правильно добавляет первый элемент, но затем выдает следующую ошибку: Can't set the property className of an undefined reference or empty reference. (не уверен, что если точная ошибка, перевод с голландского ...)

function allVideos() { 
    var sql = "SELECT videos.VideoName, videos.VideoPath FROM videos"; 
    var resultSet = db.query(sql, {json:true}); //returns: [{"VideoName":"timelapse aethon2","VideoPath":"videos\\Roermond Papier\\160424 Time laps Aethon2.avi"},{"VideoName":"timelapse aethon3","VideoPath":"videos\\Roermond Papier\\160424 Time laps Aethon2.avi"}] 
    var parsed = JSON.parse(resultSet); 
    var parsedlength = arrLenght(parsed); 
    //alert(resultSet); 
    for(var i = 0; i < parsedlength; i++) { 
     var obj = parsed[i]; 
     //alert(i); 
     var videoElement = document.getElementById("allVideos"); 
     for (var key in obj) { 
      if(obj.hasOwnProperty(key)) { 

       videoElement.appendChild(document.createElement('div')); 
       videoElement.children[i].id='allVid' + i; 
       videoElement.children[i].className='col-md-4 col-xs-12'; 
       //alert(typeof key) 
       var card = document.getElementById('allVid' + i); 
       alert(i); 
       card.appendChild(document.createElement('div')); 
       card.children[i].className='card card-block'; 
       card.children[i].innerHTML = "<h3 class='card-title'>" + obj['VideoName'] + "</h3><button class='btn btn-primary'>Selecteren</button>" 
      } 
     } 
    } 
} 

[EDIT] добавлен скриншот того, как он выглядит

Answer 1

Ваш код имеет ряд существенных проблем логики. Вы используете вложенные циклы, но добавляете к элементу, предполагая, что внешний счетчик позволит вам индексировать в дочерние элементы этого элемента, чтобы получить добавленный элемент. Позже вы попытаетесь снова получить тот же самый элемент, используя getElementById. Затем вы добавляете новый элемент к вновь созданному элементу, но пытаетесь получить доступ к этому новому элементу, используя children[i] на том, что вы только что создали   —, в этом пункте элемент card будет иметь только один ребенок, так что со второго внешний контур, он не удастся.

createElement возвращает этот элемент вам, поэтому нет никаких оснований пытаться получить к нему доступ через children[i] (либо время), либо getElementById.

Смотри комментарии:

function allVideos() { 
    var sql = "SELECT videos.VideoName, videos.VideoPath FROM videos"; 
    var resultSet = db.query(sql, {json:true}); 
    var parsed = JSON.parse(resultSet); 
    var parsedlength = arrLenght(parsed); 
    for(var i = 0; i < parsedlength; i++) { 
     var obj = parsed[i]; 
     //alert(i); 
     var videoElement = document.getElementById("allVideos"); 
     for (var key in obj) { 
      if(obj.hasOwnProperty(key)) { 
       // Create the card, give it its id and class 
       var card = document.createElement('div'); 
       card.id='allVid' + i; 
       card.className='col-md-4 col-xs-12'; 

       // Create the div to put in the card, give it its class and content 
       var div = document.createElement('div'); 
       card.appendChild(div); 
       div.className='card card-block'; 
       div.innerHTML = "<h3 class='card-title'>" + obj['VideoName'] + "</h3><button class='btn btn-primary'>Selecteren</button>" 

       // Append the card 
       videoElement.appendChild(card); 
      } 
     } 
    } 
} 

---

Примечание стороны: arrLenght выглядит как опечатка (он должен быть th, не ht), но, кроме того, нет никаких причин, чтобы использовать функцию, чтобы получить длину массив; он доступен через массив length: parsedLength = parsed.length.

Сторона Примечание 2: Вы можете найти these ways of looping through arrays полезно.

Answer 2

Ваша проблема является, если внутри вложенной для:

if(obj.hasOwnProperty(key)) { ... 

Переменная i увеличивается, даже если имущество не «принадлежит» (когда, если условие возвращает ложь), поэтому в следующий раз, что условие верно, i находится за пределами.