getAttribute shows undefined on my html table

Question

So this is my html and xml and what i'm trying to do is import the stationID,distance,address,value of h24 and all fuel attributes and when a person presses the button i want the person to see those exact elements and attributes of the xml file. The problem is that not only some show as undefined and null (as you can see in the pic) but some elements like phone that has two phones i can't make those two to show.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE dataset 
[ 
  <!ELEMENT dataset (station*)>
  <!ATTLIST dataset lat CDATA #REQUIRED
                    long CDATA #REQUIRED
                    msg CDATA #REQUIRED
  >
  
  <!ELEMENT station (country, municipality, dd, address, companyName,
        lat, long, h24, brand, phone*, fuels)>   
  <!ATTLIST station stationID CDATA #REQUIRED
       distance CDATA #REQUIRED
  >
  
  <!ELEMENT country (#PCDATA)>
  <!ATTLIST country countryID CDATA #IMPLIED>
  
  <!ELEMENT municipality (#PCDATA)>
  <!ATTLIST municipality municipalityID CDATA #IMPLIED>
  
  <!ELEMENT dd (#PCDATA)>
  <!ATTLIST dd ddID CDATA #IMPLIED>
  
  <!ELEMENT address (#PCDATA)>
  <!ELEMENT companyName (#PCDATA)>
  
  <!ELEMENT lat (#PCDATA)>
  <!ELEMENT long (#PCDATA)>
  
  <!ELEMENT h24 (#PCDATA)>
  <!ATTLIST h24 value CDATA #REQUIRED>
  
  <!ELEMENT brand (#PCDATA|EKO|Shell|JETOIL)*>
  <!ATTLIST brand brandID CDATA #REQUIRED>
  
  <!ELEMENT phone (#PCDATA)>
  
  <!ELEMENT fuels (fuel*)>
  <!ATTLIST fuels fuelTypeID CDATA #IMPLIED
        price CDATA #IMPLIED
        priceTimeStamp CDATA #IMPLIED
  >
  
  
]>

<dataset lat="23.123233" long="40.12333" msg="Hello user!">

  <station stationID="11111" distance="1.4">
    <country countryID="49000200">Λάρισας</country>
    <municipality municipalityID="12345">Φαρσάλων</municipality>
    <dd ddID="12345">Κοινότητα Σταυρού</dd>
    <address><![CDATA[Σόλωνος 35, Σταυρός]]></address>
    <companyName><![CDATA[Τζίμης Oil]]></companyName>  
    <lat>23.111456</lat>    
    <long>41.1114567</long>
    <h24 value="0"/>
    <brand brandID="1">EKO</brand>
    <phone>2410555666</phone>
    <phone>6932555444</phone>
    <fuels>
      <fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-10-22 07:30:17">Super Duper Αμόλυβδη</fuel>
      <fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-10-22 07:30:45">WOW Diesel</fuel>
    </fuels>   
  </station>
  
  <station stationID="22222" distance="2.4">
    <country countryID="49000200">Λάρισας</country>
    <municipality municipalityID="223344">Φαρσάλων</municipality>
    <dd ddID="222222">Τερψιθέα</dd>
    <address><![CDATA[Λαρίσης 22, Τερψιθέα]]></address>
    <companyName><![CDATA[ΤερψιOIL]]></companyName>  
    <lat>23.223456</lat>    
    <long>41.2234567</long>
    <h24 value="0"/>
    <brand brandID="2">/Shell</brand>
    <phone>2410555666</phone>
    <fuels>
      <fuel fuelTypeID="1" price="1.622" priceTimeStamp="2018-11-02 08:30:17">Super Duper Αμόλυβδη</fuel>
      <fuel fuelTypeID="2" price="1.042" priceTimeStamp="2018-11-02 08:30:45">WOW Diesel</fuel>
    </fuels>   
  </station>
  
  <station stationID="33333" distance="3.4">
    <country countryID="32000200">Μαγνησίας</country>
    <municipality municipalityID="332211">Βελεστίνου</municipality>
    <dd ddID="34567">Βελεστίνο</dd>
    <address><![CDATA[Κενταύρου 35, Βελεστίνο]]></address>
    <companyName><![CDATA[Κένταυρος Oil]]></companyName>  
    <lat>23.333333</lat>    
    <long>41.333333</long>
    <h24 value="1"/>
    <brand brandID="3">JETOIL</brand>
    <phone>6932555444</phone>
    
    <fuels>
      <fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-11-10 07:30:17">Super Duper Αμόλυβδη</fuel>
      <fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-11-10 07:30:45">WOW Diesel</fuel>
    </fuels>   
  </station>
</dataset>

<!DOCTYPE html>
     <html style="height: 100%; width: 100%;">
     <style>
     
      th{
       border:1px solid black;
      }
      td{
       border:1px solid black;
      }
      
      table{
       border:1px solid black;
      }
      
     </style>
      
      <body style="height: 100%; width: 100%;">
       <div id="div1" style="display:inline-block; width:150px; height:auto; float:left; border-style:groove;">
        XML file
        <button type="button" onclick="loadXml()">Load...</button>
        JSON file
        <button type="button">Load...</button>
        Clear Page
        <button type="button" name="load_clear" id="clear">Clear</button>
       </div>
       
       
       <div id="div2" style= "display:inline-block; width:90%; height:100%; border-style:groove;">
        <table id="demo"></table>
       </div>
       
       <script type="text/javascript">
        function loadXml() {
        var openxml = new XMLHttpRequest();
        openxml.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
         myFunction(this);
         }
        };
        openxml.open("GET", "fuel.xml", false);
        openxml.send();
       }
        function myFunction(xml) {
         var i;
         var xmlDoc = xml.responseXML;
         var table="<tr><th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th></tr>";
         var x = xmlDoc.getElementsByTagName("station","h24");
         
          for (i = 0; i < 3; i++){
           table += "<tr><td>" +
           x[i].getAttribute("stationID")+
           "</td><td>" +
           x[i].getAttribute("distance")+
           "</td><td>" +
           x[i].getElementsByTagName("address")[0].firstChild.data+
           "</td><td>" +
           x[i].getAttribute["value"]+
           "</td><td>"+
           x[i].getElementsByTagName("phone")[0].firstChild.data+
           "</td><td>" +
           x[i].getElementsByTagName("fuel")[0].getAttribute("fuelTypeId")+
           "</td><td>"+
           x[i].getElementsByTagName("fuel")[0].getAttribute("price")+
           "</td></tr>";
          }
           
         document.getElementById("demo").innerHTML = table;
         }
       </script>
       
      </body>
      
 </html>

Thank you for the answer, i'm so many hours trying to complete this that i didn't check for case sensitives. Anyway for phone i want it to show both phones for all stations in the same cell comma separated and for each station both fuel types ids,cost etc same call comma separated. I checked youtube and other sites for ideas on how i can do this but found nothing. — KemerDev-C, Nov 12 '18 at 23:46

shkaper · Answer 1 · 2018-11-13T00:40:06.817

If you look closer at the xml, there's a couple things to notice:

h24 is not an attribute of the <station> node, but rather a value of a child <h24> node, hence you're getting undefined
.getAttribute("fuelTypeId") should have a capitalized D: .getAttribute("fuelTypeID")
As for <phone> and <fuel> nodes, you'll first need to decide how you want to display their data: e.g. if you just want to join the values into a comma-separated string or have several cells, etc.

UPD: If you want a comma-separated string made out of attribute values or node texts, you'll first need to get an array of nodes. Notice how you're accessing a particular node (e.g. .getElementsByTagName("fuel")[0]) by specifying its index - [0] - in the collection of nodes. To make an array out of such collection you'll need to do something like Array.from(x[i].getElementsByTagName("fuel")) (also read Most efficient way to convert an HTMLCollection to an Array). Now that you have an array, you can transform it into an array of the strings (be it attribute values or texts) using something like Array.prototype.map(). Then you can just join the strings in the array into a single comma-separated string using Array.prototype.join(). You really need to read up on stuff like working with HTMLCollections and Arrays in javascript. There is no other way around that unless you want someone else to come up with the whole thing for you. MDN is a good start, it has plenty of examples.

getAttribute shows undefined on my html table

1 Answers1