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

您的代码存在一些重要的逻辑问题。你正在使用嵌套循环，但是附加到一个元素，假设外部循环计数器将允许你索引到该元素的子元素以获取刚刚附加的元素。稍后，您尝试使用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：

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

变量i会增加，即使该属性不是＆＃34;拥有＆＃34; （当if条件返回false时），所以下次条件为真时，i超出范围。

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

2 个答案: