string is undefined and executes in console (json to html)

Question

I have the below code for creating some simple JSON data, and iterating it over into my page's HTML.

The problem is this code is returning 'string' undefined error without the on load function.

With the on load function present, it is seemingly just ignored and doesn't execute at all (no errors), however, when I add the below code directly into the browser console it executes fine.

Any thoughts?

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

});

Recommended reading [Why is using “for…in” with array iteration a bad idea?](https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea) — baao, Jun 26 '18 at 21:49

Asons · Accepted Answer · 2018-06-26T22:13:10.157

One problem is here

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

The getElementsByClassName returns an array like object (HTMLCollection) and would need an index, e.g.

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

As mentioned, looping an array with for..in is not good (its for objects), so here I used forEach, and instead of getElementsByClassName I used querySelector

Stack snippet

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>

You could use querySelector instead, since you're scenario is so simple: document.querySelector('.change').innerHTML = string; — Devin Fields, Jun 26 '18 at 22:05
@DevinFields True, thanks ... updated with a note and code sample — Asons, Jun 26 '18 at 22:14

score 0 · Answer 2 · answered Jun 26 '18 at 21:51

0

Try something like this

window.addEventListener("DOMContentLoaded", function(event) { 
   //do work
});

answered Jun 26 '18 at 21:51

Pablo DbSys

532
1
7
17

No comment..... – Dr Upvote Jun 26 '18 at 21:56

string is undefined and executes in console (json to html)

2 Answers2