Display XML data in HTML using Upload

Question

Im working on a small project that allows a person to upload XML data to a HTML website and then display that data on the HTML page based on the value of a slider. This is an example of my XML data:

<?xml version = "1.0" encoding = "UTF-8"?>
<CarList>
    <Car id="1">
        <model>Ferrari</model>
        <image>images/ferrari.jpg</image>
        <colour>red</colour>
    </Car>
    <Car id="2">
        <model>Ford GT</model>
        <image>images/FordGT.jpg</image>
        <colour>blue</colour>
    </Car>
    <Car id="3">
        <model>BMW</model>
        <image>images/bmw.jpg</image>
        <colour>grey</colour>
    </Car>
</CarList>

On my HTML page i have a simple upload button. When the user uploads an XML file then some images should appear based on the colour sliders.

<div class="uploadContent">
     Upload Content
     <input type="file" class="upload-content" accept="text/xml" id="upload">
</div>

This is where the images should be displayed along with the model of the car.

<div class = "car">
     <img class = "carImage" id = "carImage" src="images/NoContent.png">
     <p class = "carName" id = "car1Name"> No Content </p>
</div>

The sliders will determine what car is show, If for example the user wants to only see red cars then the slider will be move to the left and the above images will only show red cars.

<div>
    <!--Red/Blue-->
    <p>Red</p>
        <input type="range", min="1", max="2", step="0.5"/>
    <p>Blue</p>
</div>

My gut feeling says i need to use Javascript for this but i have no idea where to start.

Any help will be appreciated.

Answer 1

if you want to create an items list from the XML file you have to

1. Parse XML file and return an array. You can see XML to Array

2. After the parse, you can .map() the array. See Array.prototype.map()

3. Least, you need to set image src attribute imageHTML.src = path;