Read a XML file using Javascript only

Question

I have a XML file which needs to be read using Javascript. The text which will be read then needs to be displayed inside 3 label tags.

I can read the XML file but when I try to display the text inside the 3 labels it only shows me the last thing being read from the XML file which in this case is "Pavarotti Gala Concert".

I want to be able to print:

label 1 = "Empire Burlesque"

label 2 = "Hide your heart"

label 3 = "Pavarotti Gala Concert"

What am I doing wrong?

XML FILE

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
    </CD>
</CATALOG>

JAVASCRIPT

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();
        } else {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET", "text.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;

        var x = xmlDoc.getElementsByTagName("CD");

        for ( i = 0; i < x.length; i++) {

            var titleName = x[i].getElementsByTagName("TITLE")[0].innerHTML;

            document.getElementById("text1").innerHTML = titleName ;
            document.getElementById("text2").innerHTML = titleName ;
            document.getElementById("text3").innerHTML = titleName ; 
    }     
}

HTML

<label id="text1"></label>
<label id="text2"></label>

Jack · Accepted Answer · 2017-02-21 22:29:14Z

1

I can read the XML file but when I try to display the text inside the 3 labels it only shows me the last thing being read from the XML file which in this case is "Pavarotti Gala Concert".

In the loop you're setting titleName to all of text1, text2, text3 so it makes sense that they're all equal to the last item.

Try replacing:

 document.getElementById("text1").innerHTML = titleName ;
 document.getElementById("text2").innerHTML = titleName ;
 document.getElementById("text3").innerHTML = titleName ;

with:

document.getElementById("text" + (i + 1)).innerHTML = titleName;

EDIT:

var titleName = x[i].getElementsByTagName("TITLE")[0].innerHTML;

if (tileName.indexOf('hide') !== -1) {
   document.getElementById("text1").innerHTML = "Hide your heart";
   document.getElementById("text2").innerHTML = "";
   document.getElementById("text3").innerHTML = "";
   break; // stop looping
}

edited Feb 21, 2017 at 22:29

answered Feb 21, 2017 at 19:26

Jack

21.3k12 gold badges51 silver badges48 bronze badges

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

3 Comments

AnotherUser Over a year ago

Thanks so much. I didn't know i could use ("text" + (i + 1)).

AnotherUser Over a year ago

One question... Would it be possible to read the xml and check for the word "hide" and display the title "Hide your heart" only and not the others?

Jack Over a year ago

@AnotherUser I edited my answer. I think that will do what you want.

Collectives™ on Stack Overflow

Read a XML file using Javascript only

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related