How can I parse variable storing XML data and dynamically print data?

Question

Let's assume I'm pulling from an XML page formatted like so:

<people>
    <person>
        <name>Bob</name>
        <age>45</age>
        <hobby>Programming</hobby>
    </person>
    ....
</people>

If I have a function that reads XML data into a JavaScript variable like so:

...
var data = responseXML;
...

And an HTML dropdown dynamically populated with the names from the data variable (the options would be added via JavaScript using an onload call on the body. Before the page loads, the code wouldn't actually contain the option tags as seen below):

<select id="names" onchange="getInfo()">
    <option value="Bob">Bob</option>
    <option value="Jim">Jim</option>
    <option value="Ron">Ron</option>
</select>

While using the onchange call on select, how can I dynamically list out the information about the person selected from the dropdown into an unordered list?

If Bob was selected, output would look something like this:

Name: Bob
Age: 45
Hobby: Golf

If a new person was selected from the dropdown, their information would then be displayed. Given the code I already have, if a new person was added to the XML document, they would automatically be added to the dropdown, so their information should be able to automatically be displayed if selected without having to add any additional code.

I would prefer to use JavaScript over jQuery as that is what I'm using for reading the XML document data into the JavaScript data variable.

Harshana · Accepted Answer · 2020-11-15 05:42:09Z

1

I created one new function as Populate Dropdown and modified your getInfo() function to retrieve the data from the XML File. Hope the below code helps:

var xml = `<people>
    <person>
        <name>Bob</name>
        <age>45</age>
        <hobby>Programming</hobby>
    </person>
    <person>
        <name>Jim</name>
        <age>40</age>
        <hobby>Study</hobby>
    </person>
    <person>
        <name>Ron</name>
        <age>50</age>
        <hobby>Dancing</hobby>
    </person>
</people>`;

var parser = new DOMParser();
var responseXML = parser.parseFromString(xml,"text/xml");
var data = responseXML;

populateDropdown();

function getInfo(){
  var name = document.getElementById("names").value;
   
  var people = data.getElementsByTagName("people")[0].childNodes;
  for (person in people){
    if(people[person].innerHTML){
      
      var personData = {
        name: people[person].getElementsByTagName("name")[0].innerHTML,
        age: people[person].getElementsByTagName("age")[0].innerHTML,
        hobby: people[person].getElementsByTagName("hobby")[0].innerHTML,
        }
       if (personData.name == name){
        var infoDiv = document.getElementById("info");
        infoDiv.innerHTML = `Name: ${personData.name} <br>Age:${personData.age}<br>Hobby:${personData.hobby}`;
        break;
       }
    }
  }
}

function populateDropdown(){
  var people = data.getElementsByTagName("people")[0].childNodes;
  for (person in people){
    if(people[person].innerHTML){  
        var select = document.getElementById("names");
        var option = document.createElement("option");
        option.value = people[person].getElementsByTagName("name")[0].innerHTML;
        option.innerHTML = people[person].getElementsByTagName("name")[0].innerHTML,
        select.appendChild(option);
    }
  }
}

<select id="names" onchange="getInfo()">
    
</select>

<div id="info">

</div>

answered Nov 15, 2020 at 5:42

Harshana

5,5561 gold badge22 silver badges30 bronze badges

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

2 Comments

gskn13 Over a year ago

I think this is really close; however, in the getInfo() function, you assign var people ONLY to the first person (Bob) in the XML data. Jim and Ron's information cannot be pulled from var people in that case. How might you assign everyone's data to var people instead?

Harshana Over a year ago

No. The people variable returns all the data including Jim's and Ron's. When parsing data with the DOM Parser, the data resides inside the index 0. That is why I added the [0].

Collectives™ on Stack Overflow

How can I parse variable storing XML data and dynamically print data?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related