带有示例的JS对象属性访问和迭代误解

Question

Got a wierd issue... the code below outputs into a table a list of SNMP object/values from whatever OID that you provide to be walked. The code works however, the variable 'jason' does not work as I would have thought.

First, I cannot access the 'jason' object from the Chrome console (console.log || console.dir).

The second issue is that if I put a console.log(key) in the 'for in' loop it does not output anything.

Third issue is that if I use dot notation to access the jason properties in the for loop outputs 'undefined'.

The last issue is that I read from other Stack posts that an array like object should not use the 'for in' loop but when I change it to a regular for loop it does not work....

Its like my jason variable doesn't exist but it does and the script below works??? I think I am misunderstanding something core to the JS language. Thanks in advance for any guidance.

document.getElementById('submit').addEventListener('click', function(){

document.getElementById('msg').innerHTML = '<br /><button class="btn btn-success" disabled="disabled"> <i class="fa fa-spinner fa-spin"></i> </button> Loading...';
request = new XMLHttpRequest();
var host = document.getElementById('host').value,
    comm = document.getElementById('comm').value || 'public',
    oid = document.getElementById('oid').value || '1.3.6.1.2.1.2.2';
var post_vars = 'host=' + encodeURIComponent(host);
post_vars += '&comm=' + encodeURIComponent(comm);
post_vars += '&oid=' + encodeURIComponent(oid);
request.open('POST', 'snmp_json.php');
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener('readystatechange', function() {
  if (request.readyState === 4 && request.status === 200) {
    var jason = JSON.parse(request.responseText);
    var output = '<table class="table table-hover">';
    output += '<thead><tr><th>Object</th><th>Value</th></tr></thead>';
    output += '<tbody>';
    for (key in jason) {
        output += '<tr><td>' + key + '</td>';
        output += '<td>' + jason[key] + '</td></tr>';
    }
    output += '</tbody></table>';
    document.getElementById('msg').innerHTML = output;
  };
});
request.send(post_vars);

});

Answer 1

The JSON object cannot be accessed by Chrome because it is a private object in the event handler. To access the object, declare JSON outside of the event handler above document.getElementById('submit')