Javascript For loop appending child 只追加第一个元素，然后抛出错误

Question

我正在使用嵌套的 for 循环遍历 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>"
            }
        }
    }
}

[编辑] 添加了外观截图

Answer 1

您的代码存在一些严重的逻辑问题。您正在使用嵌套循环，但附加到一个元素假设 outer 循环计数器会让您索引到该元素的 children 以获取您刚刚附加的元素。稍后，您尝试使用 getElementById 再次获取相同的元素。然后，您将一个新元素附加到 newly-created 元素，但尝试在刚创建的元素上使用 children[i] 访问该新元素——此时，card 元素将只有单个 child，因此从第二个外循环开始，它将失败。

createElement returns 元素给你，所以根本没有理由尝试通过 children[i] （时间）或 getElementById.[= 访问它23=]

查看评论：

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

你的问题是嵌套 for 中的 if:

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

变量i即使属性不是"owned"也会增加（当if条件returns为假时），所以下一次条件为真, i 超出范围。

Javascript For loop appending child 只追加第一个元素，然后抛出错误

Javascript For loop appending child only appends first element, then throws error

html

javascript

innerhtml

appendchild