browse: forums | FAQ
Connecting Tech Pros Worldwide
bytes > topic > javascript > answers

Hey there! Do you need JavaScript / Ajax / DHTML help?

Get answers from our community of JavaScript / Ajax / DHTML experts on BYTES! It's free.

Error: jsData[i] has no properties

Newbie
  
Join Date: Dec 2007
Posts: 2
#1: Dec 2 '07
hi im getting the above error message in firefox, when trying to display DisplayTable(tbody); function

im fairly new to java script as you can prob tell. but this code works with IE.

i get the error message on this line
td.innerHTML = jsData[i].id;

any help will be welcomed



html file

Expand|Select|Wrap|Line Numbers
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.   "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <!-- ***********************************************************
  4. txml-js-html
  5. ************************************************************ -->
  6. <html>
  7. <head>
  8. <title>Embedding External XML Data</title>
  9. <style type="text/css">
  10. body {background-color:#ffffff}
  11. table {table-collapse:collapse; border-spacing:0}
  12. td {border:2px groove black; padding:7px}
  13. th {border:2px groove black; padding:7px}
  14. .ctr {text-align:center}
  15. </style>
  16. <script language="JavaScript" type="text/javascript">
  17.  
Expand|Select|Wrap|Line Numbers
  1. // global reference to XML document object
  2. var xmlDoc;
  3. var sort=new Boolean(1);// used to sort tables
  4. var jsData = new Array();// js array for Data
  5. // gets data from XML file(xmlDoc)then draws table from xmlDoc document tree data
  6. function drawTable(tbody) {
  7.     var tr, td, i, j, oneRecord;
  8.     // node tree
  9.     var data = xmlDoc.getElementsByTagName("countries")[0];
  10.     // for td class attributes
  11.     for (i = 0; i < data.childNodes.length; i++) {
  12.         // use only 1st level element nodes
  13.         if (data.childNodes[i].nodeType == 1) {
  14.             oneRecord = data.childNodes[i];
  15.            jsData[i] = {id:oneRecord.getElementsByTagName("id")[0].firstChild.nodeValue
  16. ,year1997:oneRecord.getElementsByTagName("year1997")[0].firstChild.nodeValue
  17. ,year1998:oneRecord.getElementsByTagName("year1998")[0].firstChild.nodeValue
  18. ,year1999:oneRecord.getElementsByTagName("year1999")[0].firstChild.nodeValue
  19. ,year2000:oneRecord.getElementsByTagName("year2000")[0].firstChild.nodeValue  
  20. ,year2001:oneRecord.getElementsByTagName("year2001")[0].firstChild.nodeValue
  21. ,year2002:oneRecord.getElementsByTagName("year2002")[0].firstChild.nodeValue
  22. ,year2003:oneRecord.getElementsByTagName("year2003")[0].firstChild.nodeValue
  23. ,year2004:oneRecord.getElementsByTagName("year2004")[0].firstChild.nodeValue
  24. ,year2005:oneRecord.getElementsByTagName("year2005")[0].firstChild.nodeValue
  25. ,year2006:oneRecord.getElementsByTagName("year2006")[0].firstChild.nodeValue
  26. ,change:oneRecord.getElementsByTagName("change")[0].firstChild.nodeValue
  27. ,share:oneRecord.getElementsByTagName("share")[0].firstChild.nodeValue
  28. ,per:oneRecord.getElementsByTagName("per")[0].firstChild.nodeValue
  29. ,T2006:oneRecord.getElementsByTagName("T2006")[0].firstChild.nodeValue
  30. ,Tshare:oneRecord.getElementsByTagName("Tshare")[0].firstChild.nodeValue
  31.         } 
  32.     }
  33.     DisplayTable('countryData');
  34. }
Expand|Select|Wrap|Line Numbers
  1. function DisplayTable(tbody){
  2. var tr, td;
  3. tbody = document.getElementById(tbody);
  4. // remove existing rows, if any
  5. clearTable(tbody);
  6. var classes = ["ctr","","","","ctr"];
  7. for (var i = 0; i < jsData.length; i++) {
  8.      tr = tbody.insertRow(tbody.rows.length);
  9.            td = tr.insertCell(tr.cells.length);             
  10.            td.setAttribute("class", classes[tr.cells.length-1]);
  11.            td.innerHTML = jsData[i].id;   
  12.            td = tr.insertCell(tr.cells.length);           
  13.            td.setAttribute("class", classes[tr.cells.length-1]);
  14.            td.innerHTML = jsData[i].year1997;
  15.            td = tr.insertCell(tr.cells.length);           
  16.            td.setAttribute("class", classes[tr.cells.length-1]);
  17.            td.innerHTML = jsData[i].year1998; 
  18.            td = tr.insertCell(tr.cells.length);           
  19.            td.setAttribute("class", classes[tr.cells.length-1]);
  20.            td.innerHTML = jsData[i].year1999; 
  21.            td = tr.insertCell(tr.cells.length);           
  22.            td.setAttribute("class", classes[tr.cells.length-1]);
  23.            td.innerHTML = jsData[i].year2000; 
  24.            td = tr.insertCell(tr.cells.length);           
  25.            td.setAttribute("class", classes[tr.cells.length-1]);
  26.            td.innerHTML = jsData[i].year2001;
  27.            td = tr.insertCell(tr.cells.length);           
  28.            td.setAttribute("class", classes[tr.cells.length-1]);
  29.            td.innerHTML = jsData[i].year2002; 
  30.            td = tr.insertCell(tr.cells.length);           
  31.            td.setAttribute("class", classes[tr.cells.length-1]);
  32.            td.innerHTML = jsData[i].year2003; 
  33.            td = tr.insertCell(tr.cells.length);           
  34.            td.setAttribute("class", classes[tr.cells.length-1]);
  35.            td.innerHTML = jsData[i].year2004; 
  36.            td = tr.insertCell(tr.cells.length);           
  37.            td.setAttribute("class", classes[tr.cells.length-1]);
  38.            td.innerHTML = jsData[i].year2005;  
  39.            td = tr.insertCell(tr.cells.length);           
  40.            td.setAttribute("class", classes[tr.cells.length-1]);
  41.            td.innerHTML = jsData[i].year2006; 
  42.           td = tr.insertCell(tr.cells.length);           
  43.            td.setAttribute("class", classes[tr.cells.length-1]);
  44.            td.innerHTML = jsData[i].change;
  45.            td = tr.insertCell(tr.cells.length);           
  46.            td.setAttribute("class", classes[tr.cells.length-1]);
  47.            td.innerHTML = jsData[i].share;
  48.            td = tr.insertCell(tr.cells.length);           
  49.            td.setAttribute("class", classes[tr.cells.length-1]);
  50.            td.innerHTML = jsData[i].per; 
  51.            td = tr.insertCell(tr.cells.length);           
  52.            td.setAttribute("class", classes[tr.cells.length-1]);
  53.            td.innerHTML = jsData[i].T2006;   
  54.            td = tr.insertCell(tr.cells.length);           
  55.            td.setAttribute("class", classes[tr.cells.length-1]);
  56.            td.innerHTML = jsData[i].Tshare; 
  57. }
  58. }
Expand|Select|Wrap|Line Numbers
  1. // Remove existing table rows
  2. function clearTable(tbody) {
  3.     while (tbody.rows.length > 0) {
  4.         tbody.deleteRow(0);
  5.     }
  6. }
  7. //function sortByCountry(a, b) {
  8.  //   a = a.id.toLowerCase();
  9.   //  b = b.id.toLowerCase();
  10.    // return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  11. //}
  12. function sortByYear97(a, b) { return  a.year1997-b.year1997;}
  13. function sortByYear98(a, b) { return  a.year1998-b.year1998;}
  14. function sortByYear99(a, b) { return  a.year1999-b.year1999;}
  15. function sortByYear00(a, b) { return  a.year2000-b.year2000;}
  16. function sortByYear01(a, b) { return  a.year2001-b.year2001;}
  17. function sortByYear02(a, b) { return  a.year2002-b.year2002;}
  18. function sortByYear03(a, b) { return  a.year2003-b.year2003;}
  19. function sortByYear04(a, b) { return  a.year2004-b.year2004;}
  20. function sortByYear05(a, b) { return  a.year2005-b.year2005;}
  21. function sortByYear06(a, b) { return  a.year2006-b.year2006;}
  22. function sortByChange(a, b) { return  a.change-b.change;}
  23. function sortByShare(a, b) { return  a.share-b.share;}
  24. function sortByPer(a, b) { return  a.per-b.per;}
  25. function sortByT2006(a, b) { return  a.T2006-b.T2006;}
  26. function sortByTshare(a, b) { return  a.Tshare-b.Tshare;}
  27. // initialize first time -- invoked onload
  28. function init(xFile) {
  29.     // confirm browser supports needed features and load .xml file
  30.     if (verifySupport(xFile)) {
  31.         // let file loading catch up to execution thread
  32.         setTimeout("drawTable('countryData')", 1000);
  33.     }
  34. }
Expand|Select|Wrap|Line Numbers
  1. // Sorting function dispatcher (invoked by table column links)
  2. function sortTable(link) {
  3.     switch (link.firstChild.nodeValue) {
  4.          // case "Country" :
  5.           //  if (sort == 1){jsData.sort(sortByCountry);jsData.reverse();} else{jsData.sort(sortByCountry);}
  6.            // break;
  7.         case "1997" :
  8.             if (sort == 1){jsData.sort(sortByYear97);jsData.reverse();} else{ jsData.sort(sortByYear97);}
  9.             break;
  10.         case "1998" :
  11.             if (sort == 1){jsData.sort(sortByYear98);jsData.reverse();}else{ jsData.sort(sortByYear98);}
  12.             break;
  13.         case "1999" :
  14.             if (sort == 1){jsData.sort(sortByYear99);jsData.reverse();}else{ jsData.sort(sortByYear99);}
  15.             break;
  16.         case "2000" :
  17.             if (sort == 1){jsData.sort(sortByYear00);jsData.reverse();}else{ jsData.sort(sortByYear00);}
  18.             break;
  19.         case "2001" :
  20.             if (sort == 1){jsData.sort(sortByYear01);jsData.reverse();}else{ jsData.sort(sortByYear01);}
  21.             break;
  22.         case "2002" :
  23.             if (sort == 1){jsData.sort(sortByYear02);jsData.reverse();}else{ jsData.sort(sortByYear02);}
  24.             break;
  25.         case "2003" :
  26.             if (sort == 1){jsData.sort(sortByYear03);jsData.reverse();}else{ jsData.sort(sortByYear03);}
  27.             break;
  28.         case "2004" :
  29.             if (sort == 1){jsData.sort(sortByYear04);jsData.reverse();}else{ jsData.sort(sortByYear04);}
  30.             break;
  31.         case "2005" :
  32.             if (sort == 1){jsData.sort(sortByYear05);jsData.reverse();}else{ jsData.sort(sortByYear05);}
  33.             break;
  34.         case "2006" :
  35.             if (sort == 1){jsData.sort(sortByYear06);jsData.reverse();}else{ jsData.sort(sortByYear06);}
  36.             break;
  37.         case "Change" :
  38.             if (sort == 1){jsData.sort(sortByChange);jsData.reverse();}else{ jsData.sort(sortByChange);}
  39.             break;
  40.         case "Share" :
  41.             if (sort == 1){jsData.sort(sortByShare);jsData.reverse();}else{ jsData.sort(sortByShare);}
  42.             break;
  43.         case "Per" :
  44.             if (sort == 1){jsData.sort(sortByPer);jsData.reverse();}else{ jsData.sort(sortByPer);}
  45.             break;
  46.         case "T2006" :
  47.             if (sort == 1){jsData.sort(sortByT2006);jsData.reverse();}else{ jsData.sort(sortByT2006);}
  48.             break;
  49.         case "Tshare" :
  50.             if (sort == 1){jsData.sort(sortByTshare);jsData.reverse();}else{ jsData.sort(sortByTshare);}
  51.             break;
  52.     }
  53.     if (sort == 1){sort =2;}else{sort = 1;}
  54.     DisplayTable('countryData');
  55. }
Expand|Select|Wrap|Line Numbers
  1. // verify that browser supports XML features and load external .xml file
  2. function verifySupport(xFile) {
  3.     if (document.implementation && document.implementation.createDocument) {
  4.         // this is the W3C DOM way, supported so far only in NN6
  5.         xmlDoc = document.implementation.createDocument("", "thexmlDoc", null);
  6.     } else if (typeof ActiveXObject != "undefined") {
  7.         // make sure real object is supported (sorry, IE5/Mac)
  8.         if (document.getElementById("msxml").async) {
  9.             xmlDoc = new ActiveXObject("Msxml.DOMDocument");
  10.         }
  11.     }
  12.     if (xmlDoc && typeof xmlDoc.load != "undefined") {
  13.         // load external file (from same domain)
  14.         xmlDoc.load(xFile);
  15.         return true;
  16.     } else {
  17.         var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
  18.         if (reply) {
  19.             history.back();
  20.         }
  21.     }
  22.     return false;
  23. }
  24.  
Expand|Select|Wrap|Line Numbers
  1. </script>
  2. </head>
  3. <body onload="init('data.xml')">
  4. <h1>World Polutation</h1>
  5. <hr>
  6.  
<table id="dataTable">
<thead>
<tr>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">Country</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">1997</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">1998</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">1999</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2000</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2001</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2002</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2003</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2004</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2005</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">2006</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">Change</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">Share</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">Per</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">T2006</a></th>
<th><a href="#" title="Sort by Year" onclick="sortTable(this)">Tshare</a></th>
</tr>
</thead>
<tbody id='countryData'></tbody>
</table>
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>



gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,314
#2: Dec 2 '07

re: Error: jsData[i] has no properties

hi ...

when using firstChild in FF you should check wheter that first child is a whitespace or textnode ... there is a difference between the node-representation in IE and FF/Mozilla ...

kind regards
Newbie
  
Join Date: Dec 2007
Posts: 2
#3: Dec 2 '07

re: Error: jsData[i] has no properties

Quote:

Originally Posted by gits

hi ...

when using firstChild in FF you should check wheter that first child is a whitespace or textnode ... there is a difference between the node-representation in IE and FF/Mozilla ...

kind regards


thanks for the advice but since im new to this, is there a good resources on the net? i know of w3s

with examples i can work from?

thank you
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,314
#4: Dec 2 '07

re: Error: jsData[i] has no properties

hi ...

you may have a look at the links in our offsite links thread at top of the js-forum

kind regards
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 230,942 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

Copyright 1995-2010 BYTES. All rights Reserved About Bytes | Help | Site Map
Bytes Expert Network: 230,942 Members (2308 Online)