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.

Aldo Maria Landini · Accepted Answer · 2018-10-27 13:57:36Z

0

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

Parse XML file and return an array. You can see XML to Array
After the parse, you can .map() the array. See Array.prototype.map()
Least, you need to set image src attribute imageHTML.src = path;

answered Oct 27, 2018 at 13:57

Aldo Maria Landini

1572 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display XML data in HTML using Upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related