{"id":1202,"date":"2022-08-30T15:14:05","date_gmt":"2022-08-30T15:14:05","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/10\/javascript-json-data-to-html-table-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:14:05","modified_gmt":"2022-08-30T15:14:05","slug":"javascript-json-data-to-html-table-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/javascript-json-data-to-html-table-collection-of-common-programming-errors\/","title":{"rendered":"Javascript JSON Data to HTML Table-Collection of common programming errors"},"content":{"rendered":"<p>Ok, so I have some code which I&#8217;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 &#8220;undefined&#8221; in each cell. I&#8217;ve had a look through this code and cannot find anything that would cause it but I&#8217;m not an expert and I&#8217;m sure a fresh pair of eyes would help so any ideas? Thank you in anticipation!<\/p>\n<pre><code>\n\n<\/code><\/pre>\n<h1><code><u>USA State Information<\/u><\/code><\/h1>\n<pre>\n\n\n<br \/><b>Please select an area of the USA in the dropdown list below.<\/b>\n<br \/>\n\n\n\n<br \/>\n\n\n<\/pre>\n<table id=\"elems\" border=\"1\" cellspacing=\"1\" cellpadding=\"5\">\n<tr>\n<td><b>Name<\/b><\/td>\n<td><b>Number<\/b><\/td>\n<td><b>Joined<\/b><\/td>\n<td><b>Population<\/b><\/td>\n<\/tr>\n<\/table>\n<p><code>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++; } }<\/p>\n<p><\/code><\/p>\n<ol>\n<li>\n<p>I think I found the issue:<\/p>\n<pre><code>var JSONObject = [{}];\n<\/code><\/pre>\n<p>should be<\/p>\n<pre><code>var JSONObject = [];\n<\/code><\/pre>\n<p>The reason this fixes the issue is that you&#8217;re iterating through the <code>JSONObject<\/code> 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 <code>name<\/code>, <code>number<\/code>, etc., the empty object won&#8217;t have them and they&#8217;ll be returned as undefined.<\/p>\n<\/li>\n<li>\n<p>have you tried:<\/p>\n<p>for (i=<strong>1<\/strong>; i!=($length); i++){<\/p>\n<p>It may be your index starts from 1 and not 0<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-10 00:09:19. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>Ok, so I have some code which I&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1202","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1202"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1202\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}