How to read and display XML content in HTML page?

Question

I have a XML RSS feed from a website.content of feed is shown below.

Name model year

Ford. RTT. 2013

Dodge. ABC. 2014

Now I have an another website where I want to display the content in different customized look in HTML. So when ever the feed is updated the content in my page will also be updated. How to achieve this in HTML. website as shown in screen shot below

https://i.sstatic.net/A5AEd.jpg

I have used jquery mobile for this list display. source code for the same

<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-hc.jpg">
    <h2>Warning</h2>
    <p>Hot Chip</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-p.jpg">
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>
    </li>
</ul>

Now instead of the heading and sub heading and image url and href url i want it dynamic from a xml rss . How do i code for the same.Help me learn

Later what i want to achieve is to when user clicks on any one list the respective details of the car needs to be fetched from rss again and displayed.

I found this w3school link but when i tried to add the same code between .Nothing was displayed. http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

Alok Kumar · Accepted Answer · 2014-03-21 11:25:33Z

Lets say you have following XML content in sample.xml

<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
  <items>
    <item>
      <title>Lorem</title>
      <description>Lorem Ipsum</description>
      <link>http://lorempixel.com/100/100/people/</link>
      <image>http://lorempixel.com/100/100/people/</image>
    </item>
    <item>
      <title>dolor sit amet</title>
      <description>consectetur adipisicing elit, sed do eiusmod</description>
      <link>http://lorempixel.com/100/100/food/</link>
      <image>http://lorempixel.com/100/100/food/</image>
    </item>
    <item>
      <title>tempor incididunt</title>
      <description>ut labore et dolore magna aliqua.</description>
      <link>http://lorempixel.com/100/100/city/</link>
      <image>http://lorempixel.com/100/100/city/</image>
    </item>    
  </items>
</rss>

Now you have to display it on HTML page whose body has
<div id="main"></div>

Then using jQuery you can parse and display it in html like this

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "sample.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml)
{
  $("#main").html("<ul id='content' data-role='listview' data-inset='true'></ul>");
  $(xml).find("item").each(function()
  {
    $("#content").append("<li><a href='"+$(this).find("link").text()+"'><img src='"+$(this).find("image").text()+"'/><h2>"+$(this).find("title").text()+"</h2><p>"+$(this).find("title").text()+"</p></a></li>");
  });  
}

If you rather want to do it with javascript and not jQuery then try this

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML; 
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
  {     
    document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
  }
document.write("</ul>");

To see a demo of this see these two links

http://alokation.com/temp/ParseXML/ParseXMLwithJS.html http://alokation.com/temp/ParseXML/ParseXMLwithjQuery.html

The xml file is located here http://alokation.com/temp/ParseXML/sample.xml

You can read further on XML - jQuery parsing here tech.pro/tutorial/877/xml-parsing-with-jquery If your XML is located on different server then you may face Cross-Domain Request issues which can be checked in browser-console. In such case you have to look into CORS html5rocks.com/en/tutorials/cors jvaneyck.wordpress.com/2014/01/07/…

Collectives™ on Stack Overflow

How to read and display XML content in HTML page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related