Javascript JSON Data to HTML Table-Collection of common programming errors

Ok, so I have some code which I’ll paste below now. What the code does is read the contents of an XML file and put it in to a JSON. Then puts the data from the JSON into a HTML table. All works fine except one thing. When the table is created the first row (after the column headings) always shows up as “undefined” in each cell. I’ve had a look through this code and cannot find anything that would cause it but I’m not an expert and I’m sure a fresh pair of eyes would help so any ideas? Thank you in anticipation!



USA State Information




Please select an area of the USA in the dropdown list below.

Name Number Joined Population

function findXML($area) { $area = "XML/" + $area; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",$area,true); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; //find number of elements in the XML file $length = xmlDoc.getElementsByTagName("name").length; var JSONObject = [{}]; for (i=0; i!=$length; i++){ //do something JSONObject.push( { "name":(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue), "number":(xmlDoc.getElementsByTagName("number")[i].childNodes[0].nodeValue), "joined":(xmlDoc.getElementsByTagName("joined")[i].childNodes[0].nodeValue), "population":(xmlDoc.getElementsByTagName("population")[i].childNodes[0].nodeValue) } ); } r=1; i=0; for (i=0; i!=($length); i++){ var tblr = document.getElementById("elems").insertRow(r); var cell1= tblr.insertCell(0); var cell2= tblr.insertCell(1); var cell3= tblr.insertCell(2); var cell4= tblr.insertCell(3); cell1.innerHTML = JSONObject[i].name; cell2.innerHTML = JSONObject[i].number; cell3.innerHTML = JSONObject[i].joined; cell4.innerHTML = JSONObject[i].population; r++; } }

  1. I think I found the issue:

    var JSONObject = [{}];
    

    should be

    var JSONObject = [];
    

    The reason this fixes the issue is that you’re iterating through the JSONObject array starting at the first index. This is fine, but the way you initialized the array gives the first index an empty object. When you go to get the properties name, number, etc., the empty object won’t have them and they’ll be returned as undefined.

  2. have you tried:

    for (i=1; i!=($length); i++){

    It may be your index starts from 1 and not 0

Originally posted 2013-11-10 00:09:19.