Displaying XML in HTML

Question

In my index.html file I have created various list like so (ranging from vendor-one to vendor-seven):

<ul id="vendor-one">
    <li class="sweet" id="2">No sweets available</li>
    <li class="sweet" id="3">No sweets available</li>
    <li class="sweet" id="4">No sweets available</li>
    <li class="sweet" id="5">No sweets available</li>
    <li class="sweet" id="6">No sweets available</li>
    <li class="sweet" id="7">No sweets available</li>
    <li class="sweet" id="8"></li>
</ul>

I then use php to upload the XML file(test.xml) to a folder: uploads/. A sample from the XML file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<sweet_data>
<title>sweet data</title>
    <sweet id="2">
    <vendor_one>
        <name>Twixta</name>
        <start_time>9.00am</start_time>
        <end_time>10.45am</end_time>
    </vendor_one>
    </sweet >
    <sweet id="3">
    <vendor_one>
        <name>Beunos</name>
        <start_time>10.45am</start_time>
        <end_time>12.45pm</end_time>
    </vendor_one>
    </sweet >
    <sweet id="4">
    <vendor_one>
        <name>Mars</name>
        <start_time>12.45pm</start_time>
        <end_time>2.30pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="5">
    <vendor_one>
        <name>Thunderball</name>
        <start_time>2.30pm</start_time>
        <end_time>4.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="6">
    <vendor_one>
        <name>Egg Tastic</name>
        <start_time>4.45pm</start_time>
        <end_time>6.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="7">
    <vendor_one>
        <name>Fruity Tubes</name>
        <start_time>6.45pm</start_time>
        <end_time>8.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="8">
    <vendor_one>
        <name>Rainbows</name>
        <start_time>8.45pm</start_time>
        <end_time>11.00pm</end_time>
    </vendor_one>
    </sweet>
</sweet_data>

How do I do the following:

Use the test.xml file from the 'uploads' folder.
Display the name of each sweet in the xml file, in each row, and remove the 'No sweets available' text.
If possible have the start and end times in the XML file affect the length of the li

Start with a parser - http://www.php.net/manual/en/simplexml.examples-basic.php — Jay Blanchard, May 15 '14 at 20:34
you should process xml with php and send json to JS to consume and update the HTML DOM. — Ramy Nasr, May 15 '14 at 20:34
Actually @Ramy there is no need to add the layers of JSON, et. al. to this. He can parse the XML and output the HTML list server-side. — Jay Blanchard, May 15 '14 at 20:37
Libraries that support XML transforms can be of help, if you want to avoid error-prone programmatic parsing. For XML Transforms see http://www.w3schools.com/xsl/xsl_transformation.asp — Max, May 15 '14 at 20:41
I believe when he said that he wants to replace "no sweets available", he wanted to do that on the client-side after the page already loaded. I am guessing also that he doesn't want to replace the HTML list but rather individual `li` elements. If that's not the case then you are correct and returning HTML directly is better. — Ramy Nasr, May 15 '14 at 20:41
Yes @Ramy that is correct. Are you able to link me to any helpful documents? — Glitchezz, May 15 '14 at 22:06
I believe you can do client-side XML -> HTML transform. Try here http://www.w3schools.com/xsl/xsl_client.asp — Max, May 16 '14 at 18:35

score 0 · Accepted Answer · edited May 23 '17 at 12:27

Here is some starting points that might help:

First, you will be parsing XML to JSON on the server-side ( using PHP I assume ). These are starting points to do that:

Once you have PHP doing that, You need to point your JavaScript to it to get your JSON. You can do by using AJAX. If you are already using jQuery on your site, then you can use jQuery.ajax()

Doing that, you will end up with an array of all the elements you want to update on your client-side and you just need to iterate over them, and replace the content of each <li> based on their id

Google is your friend to find more specifics as you go :)

Displaying XML in HTML

1 Answers1