Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Forums (http://www.go4expert.com/forums/web-design-forum/)
-   -   Error: jsData[i] has no properties (http://www.go4expert.com/forums/error-jsdatai-properties-t7672/)

dr_awol 2Dec2007 23:43

Error: jsData[i] has no properties
 
HELLO, i hope someone can help. im getting the above error message in firefox, the code works in IE

what im trying to do is, import an XML file to JSArray, then display this as a table,

i get he error message on line

td.innerHTML = jsData[i].id;

i had the code working but im pritty new to internet dev as u might be able to tell.

any help would be welcomed.

the code is below and attached is the data.xml file

Code:


<!-- ***********************************************************

************************************************************ -->

<html>
<head>
<title>Embedding External XML Data</title>


<style type="text/css">
body {background-color:#ffffff}
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px}
th {border:2px groove black; padding:7px}
.ctr {text-align:center}
</style>

<script language="JavaScript" type="text/javascript">
// global reference to XML document object
var xmlDoc;
var sort=new Boolean(1);// used to sort tables
var jsData = new Array();// js array for Data


// gets data from XML file(xmlDoc)then draws table from xmlDoc document tree data
function drawTable(tbody) {
    var tr, td, i, j, oneRecord;
   
    // node tree
    var data = xmlDoc.getElementsByTagName("countries")[0];
    // for td class attributes

    for (i = 0; i < data.childNodes.length; i++) {
        // use only 1st level element nodes
        if (data.childNodes[i].nodeType == 1) {
         
            oneRecord = data.childNodes[i];
     
           
          jsData[i] = {id:oneRecord.getElementsByTagName("id")[0].firstChild.nodeValue
                        ,year1997:oneRecord.getElementsByTagName("year1997")[0].firstChild.nodeValue
                        ,year1998:oneRecord.getElementsByTagName("year1998")[0].firstChild.nodeValue
                        ,year1999:oneRecord.getElementsByTagName("year1999")[0].firstChild.nodeValue
                        ,year2000:oneRecord.getElementsByTagName("year2000")[0].firstChild.nodeValue 
                        ,year2001:oneRecord.getElementsByTagName("year2001")[0].firstChild.nodeValue
                        ,year2002:oneRecord.getElementsByTagName("year2002")[0].firstChild.nodeValue
                        ,year2003:oneRecord.getElementsByTagName("year2003")[0].firstChild.nodeValue
                        ,year2004:oneRecord.getElementsByTagName("year2004")[0].firstChild.nodeValue
                        ,year2005:oneRecord.getElementsByTagName("year2005")[0].firstChild.nodeValue
                        ,year2006:oneRecord.getElementsByTagName("year2006")[0].firstChild.nodeValue
                        ,change:oneRecord.getElementsByTagName("change")[0].firstChild.nodeValue
                        ,share:oneRecord.getElementsByTagName("share")[0].firstChild.nodeValue
                        ,per:oneRecord.getElementsByTagName("per")[0].firstChild.nodeValue
                        ,T2006:oneRecord.getElementsByTagName("T2006")[0].firstChild.nodeValue
                        ,Tshare:oneRecord.getElementsByTagName("Tshare")[0].firstChild.nodeValue
                        };
                       
         
         
        }
       
    }
   
    DisplayTable('countryData');
}



function DisplayTable(tbody){

var tr, td;

tbody = document.getElementById(tbody);
// remove existing rows, if any
clearTable(tbody);

var classes = ["ctr","","","","ctr"];
for (var i = 0; i < jsData.length; i++) {
 
 
    tr = tbody.insertRow(tbody.rows.length);

          td = tr.insertCell(tr.cells.length);           
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].id; 
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year1997;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year1998;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year1999;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2000;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2001;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2002;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2003;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2004;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2005; 
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].year2006;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].change;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].share;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].per;
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].T2006; 
         
          td = tr.insertCell(tr.cells.length);         
          td.setAttribute("class", classes[tr.cells.length-1]);
          td.innerHTML = jsData[i].Tshare;
}

}

// Remove existing table rows
function clearTable(tbody) {
    while (tbody.rows.length > 0) {
        tbody.deleteRow(0);
    }
}


//function sortByCountry(a, b) {
 //  a = a.id.toLowerCase();
  //  b = b.id.toLowerCase();
  // return ((a < b) ? -1 : ((a > b) ? 1 : 0));
//}




function sortByYear97(a, b) { return  a.year1997-b.year1997;}
function sortByYear98(a, b) { return  a.year1998-b.year1998;}
function sortByYear99(a, b) { return  a.year1999-b.year1999;}
function sortByYear00(a, b) { return  a.year2000-b.year2000;}
function sortByYear01(a, b) { return  a.year2001-b.year2001;}
function sortByYear02(a, b) { return  a.year2002-b.year2002;}
function sortByYear03(a, b) { return  a.year2003-b.year2003;}
function sortByYear04(a, b) { return  a.year2004-b.year2004;}
function sortByYear05(a, b) { return  a.year2005-b.year2005;}
function sortByYear06(a, b) { return  a.year2006-b.year2006;}

function sortByChange(a, b) { return  a.change-b.change;}
function sortByShare(a, b) { return  a.share-b.share;}
function sortByPer(a, b) { return  a.per-b.per;}
function sortByT2006(a, b) { return  a.T2006-b.T2006;}
function sortByTshare(a, b) { return  a.Tshare-b.Tshare;}


   
   
 

// initialize first time -- invoked onload
function init(xFile) {
    // confirm browser supports needed features and load .xml file
    if (verifySupport(xFile)) {
        // let file loading catch up to execution thread
        setTimeout("drawTable('countryData')", 1000);
    }
}


// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {

    switch (link.firstChild.nodeValue) {
        // case "Country" :
          //  if (sort == 1){jsData.sort(sortByCountry);jsData.reverse();} else{jsData.sort(sortByCountry);}
          // break;
        case "1997" :
            if (sort == 1){jsData.sort(sortByYear97);jsData.reverse();} else{ jsData.sort(sortByYear97);}
            break;
        case "1998" :
            if (sort == 1){jsData.sort(sortByYear98);jsData.reverse();}else{ jsData.sort(sortByYear98);}
            break;
        case "1999" :
            if (sort == 1){jsData.sort(sortByYear99);jsData.reverse();}else{ jsData.sort(sortByYear99);}
            break;
        case "2000" :
            if (sort == 1){jsData.sort(sortByYear00);jsData.reverse();}else{ jsData.sort(sortByYear00);}
            break;
        case "2001" :
            if (sort == 1){jsData.sort(sortByYear01);jsData.reverse();}else{ jsData.sort(sortByYear01);}
            break;
        case "2002" :
            if (sort == 1){jsData.sort(sortByYear02);jsData.reverse();}else{ jsData.sort(sortByYear02);}
            break;
        case "2003" :
            if (sort == 1){jsData.sort(sortByYear03);jsData.reverse();}else{ jsData.sort(sortByYear03);}
            break;
        case "2004" :
            if (sort == 1){jsData.sort(sortByYear04);jsData.reverse();}else{ jsData.sort(sortByYear04);}
            break;
        case "2005" :
            if (sort == 1){jsData.sort(sortByYear05);jsData.reverse();}else{ jsData.sort(sortByYear05);}
            break;
        case "2006" :
            if (sort == 1){jsData.sort(sortByYear06);jsData.reverse();}else{ jsData.sort(sortByYear06);}
            break;
        case "Change" :
            if (sort == 1){jsData.sort(sortByChange);jsData.reverse();}else{ jsData.sort(sortByChange);}
            break;
        case "Share" :
            if (sort == 1){jsData.sort(sortByShare);jsData.reverse();}else{ jsData.sort(sortByShare);}
            break;
        case "Per" :
            if (sort == 1){jsData.sort(sortByPer);jsData.reverse();}else{ jsData.sort(sortByPer);}
            break;
        case "T2006" :
            if (sort == 1){jsData.sort(sortByT2006);jsData.reverse();}else{ jsData.sort(sortByT2006);}
            break;
        case "Tshare" :
            if (sort == 1){jsData.sort(sortByTshare);jsData.reverse();}else{ jsData.sort(sortByTshare);}
            break;
         

    }
   
    if (sort == 1){sort =2;}else{sort = 1;}
    DisplayTable('countryData');
}




// verify that browser supports XML features and load external .xml file
function verifySupport(xFile) {
    if (document.implementation && document.implementation.createDocument) {
        // this is the W3C DOM way, supported so far only in NN6
        xmlDoc = document.implementation.createDocument("", "thexmlDoc", null);
    } else if (typeof ActiveXObject != "undefined") {
        // make sure real object is supported (sorry, IE5/Mac)
        if (document.getElementById("msxml").async) {
            xmlDoc = new ActiveXObject("Msxml.DOMDocument");
        }
    }
    if (xmlDoc && typeof xmlDoc.load != "undefined") {
        // load external file (from same domain)
        xmlDoc.load(xFile);
        return true;
    } else {
        var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
        if (reply) {
            history.back();
        }
    }
    return false;
}


</script>

</head>
<body onload="init('data.xml')">
<h1>World Polutation</h1>

<hr>
<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>



All times are GMT +5.5. The time now is 13:03.