Javascript For循环附加子项仅附加第一个元素，然后抛出错误

Question

我正在使用嵌套 for 循环遍历 js 对象，如下所述，它正确附加第一个元素，但随后抛出以下错误: 无法设置 undefined reference 或空引用的属性 className。(不确定是否存在确切错误，翻译自荷兰语...)

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>"
            }
        }
    }
}

[编辑]添加了其外观的屏幕截图

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有用。