javascript - 字符串未定义并在控制台中执行(json 到 html)

Question

我有以下代码用于创建一些简单的 JSON 数据，并将其迭代到我的页面的 HTML 中。

问题是此代码在没有加载函数的情况下返回'string'未定义错误。

由于存在加载函数，它似乎只是被忽略并且根本不执行(没有错误)，但是，当我将以下代码直接添加到浏览器控制台时，它执行得很好.

有什么想法吗？

window.addEventListener('load', function() {

    var json =[{
                "Name": "sample data",
                "Type": "lorem ip sum lorem sample",
                "DateModified": "6/14/2218 17:22:50",
                "Size": "2 KB",
            }, {
                "Name": "sample Q",
                "Type": "lorem ipsum",
                "DateModified": "5/11/2218 7:32:10",
                "Size": "6999 KB",
            }, {
                "Name": "sample x",
                "Type": "blah blah",
                "DateModified": "6/26/2218 10:29:59",
                "Size": "8999 KB",
            },
    ];

    var string ="";

    for (i in json) {
        string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" id="all" name="all" value="all"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
    };
    document.getElementsByClassName('change').innerHTML =string

});

Answer 1

这里有一个问题

document.getElementsByClassName('change').innerHTML = string

getElementsByClassName返回一个类似数组的对象(HTMLCollection)并且需要一个索引，例如

document.getElementsByClassName('change')[0].innerHTML = string

如前所述，使用 for..in 循环数组并不好(它适用于对象)，因此这里我使用 forEach，而不是 getElementsByClassName 我用过querySelector

堆栈片段

window.addEventListener('load', function() {

    var json =[{
                "Name": "sample data",
                "Type": "lorem ip sum lorem sample",
                "DateModified": "6/14/2218 17:22:50",
                "Size": "2 KB",
            }, {
                "Name": "sample Q",
                "Type": "lorem ipsum",
                "DateModified": "5/11/2218 7:32:10",
                "Size": "6999 KB",
            }, {
                "Name": "sample x",
                "Type": "blah blah",
                "DateModified": "6/26/2218 10:29:59",
                "Size": "8999 KB",
            },
    ];

    var string ="";

    json.forEach( function(item) {
        string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" id="all" name="all" value="all"></div><div class="col-md-15 col-sm-4"><span class="folders">'+item.Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+item.Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+item.DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+item.Size+'</span></div></div>';
    });
    
    document.querySelector('.change').innerHTML = string

});

<div class="change"></div>