1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Error: jsData[i] has no properties

Discussion in 'Web Design, HTML And CSS' started by dr_awol, Dec 2, 2007.

  1. dr_awol

    dr_awol New Member

    Joined:
    Dec 2, 2007
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    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.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>
    
    
    
     
    Last edited by a moderator: Dec 3, 2007

Share This Page