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:

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

Answer 1

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:

• PHP simplexml
• Question about XML to JSON
• Tutorial about the same thing

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 :)