CODEWITHSUNDEEP
htmljquerycssxml
Akshay
Akshay

Reputation: 35

How to fetch contents from XML using JQUERY and display it on the table?

I want to display data from XML file into a table, like:

<table>
<th>Head 1</th><th>Head 2</th><th>Head 3</th>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

All 3 columns of the table will be filled with the data from the XML file. I tried it but I'm able to see the only one data from the file but all rows must be filled with unique data. Also, once the JQUERY loads the data, 'table heading' doesn't display, instead the data from the file itself appears.

And when the "new XML" file will be added to the folder, the data from the older XML file should be disappeared and the data from the new file should be displayed on the screen.

Below I've added my code snippet. HTML file

<div>
    <table class="status_table">
        <th class="table_heading">Heading 1</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 2</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 3</th>
        <tr></tr>
    </table>
</div>

JQUERY file

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

$(document).ready(function(){
    truckData();
    fetch();
})
function fetch(){
    setTimeout(function(){
        truckData();
        fetch();
    },100)
}

function truckData(){
$.ajax({
  url: "20200707083610.xml",
  dataType: "",
  success: function(data){

    $("tr").children().remove();
    $(data).find("DisplayData").each(function(){
      var info = '<td class="table_content" style="color: #DB075C;">'+$(this).find("LaneName").text()+'<td class="table_content" style="color: #FFFF00;">'+$(this).find("PlateNumber").text()+'<td class="table_content" style="color: #3107DB;">'+$(this).find("BayName").text();

      $("tr").append(info);
    });
  }
})
}

XML File

<DisplayRequestData>
        <DisplayData displayPort="d-01">
            <LaneName>Lane 1</LaneName>
            <PlateNumber>7709</PlateNumber>
            <BayName>ABCD 1</BayName>
        </DisplayData>
        <DisplayData displayPort="d-02">
            <LaneName>Lane 2</LaneName>
            <PlateNumber>5652</PlateNumber>
            <BayName>XYZA 0012</BayName>
        </DisplayData>
        <DisplayData displayPort="d-03">
            <LaneName>Lane 3</LaneName>
            <PlateNumber>XR-20398</PlateNumber>
            <BayName></BayName>
        </DisplayData>
</DisplayRequestData>

Upvotes: 1

Views: 390

Answers (1)

Swati
Swati

Reputation: 28522

You can use += to append new rows ,currently your code just append row in tr . Instead you can use tbody and append trs inside this tbody.Also , you can give dataType: "xml" in ajax call as you are returning xml file as response.

Demo Code :

//your xml
var data = '<DisplayRequestData><DisplayData displayPort="d-01"><LaneName>Lane 1</LaneName><PlateNumber>7709</PlateNumber><BayName>ABCD 1</BayName> </DisplayData><DisplayData displayPort="d-02"><LaneName>Lane 2</LaneName><PlateNumber>5652</PlateNumber><BayName>XYZA 0012</BayName></DisplayData> <DisplayData displayPort="d-03"><LaneName>Lane 3</LaneName> <PlateNumber>XR-20398</PlateNumber> <BayName></BayName></DisplayData></DisplayRequestData>'
var info = "";
//parse xml (this is not needed if you have specified response as xml )
$xml = $($.parseXML(data));
//loop through data
$xml.find("DisplayData").each(function() {
  //append rows
  info += '<tr><td class="table_content" style="color: #DB075C;">' + $(this).find("LaneName").text() + '<td class="table_content" style="color: #FFFF00;">' + $(this).find("PlateNumber").text() + '<td class="table_content" style="color: #3107DB;">' + $(this).find("BayName").text() + '</tr>';
});
//add rows inside tbody
$("table tbody").html(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="status_table">
    <thead>
      <th class="table_heading">LaneName</th>
      <th class="table_heading" style="text-align:center;">PlateNumber</th>
      <th class="table_heading" style="text-align:center; ">BayName</th>
    </thead>
    <tbody>
   <tr></tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions