Fetch XML Content into HTML

Question

I am a newbie to HTML/JS, so I am hoping you experts can help me out here with a small question. I have html5 music player with playlist, contents of which are currently mentioned within the index.html file as follows:

<div id="divListing">
    <ol id="olContents">
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song< /a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
    </ol>
</div>

My goal is to get <li> items from a XML file so that I don't have to keep updating the html file every time but instead if I change the strings on my external(dropbox like) source.XML file being maintained in the same syntax as follows:

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

<data>               
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>

</data>

I am not sure how to associate or call the XML file so that html can read them as if they were being called directly in html.

Any code help you can share will be greatly appreciated.

Thanks!

Answer 1

Without spelling out all the code, I'd use AJAX to make a request for the XML file. Then once you receive that data, you can use javascript/jQuery to insert that HTML into your list.

Answer 2

Follow these steps to get your solution

1. Create a Web Service/ Web Api which will return Songs XML from server.

2. Call that webservice using jQuery Ajax

3. Read response and create li HTML elements dynamically as per XML response.