Undefined trying to parse through this xml file

Question

so I am definately a beginner when it comes to javascript and jquery, and I am currently trying to parse through this xml (which is a response from an API call). The problem I am having is I am not sure how to parse through the xml file in order to get some values.

<group_user>
<id type="integer">2671029</id>
<created_at type="datetime">2013-01-20T21:42:01+00:00</created_at>
<comments_count type="integer">0</comments_count>
<moderator_at type="datetime" nil="true"/>
<user>
<id type="integer">5586131</id>
<first_name>Melora</first_name>
</user>
</group_user>
<group_user>
<id type="integer">2026289</id>
<created_at type="datetime">2012-06-08T04:22:38+00:00</created_at>
<comments_count type="integer">38</comments_count>
<moderator_at type="datetime" nil="true"/>
<user>
<id type="integer">6082517</id>
<first_name>Cindy</first_name>
</user>

for all the users (not group_users) I want to store/ consolelog all of the id's and all of the first names.

Right now I am doing:

   var name = $(xml).find("first_name").text();
   console.log(name); 

  var id = $(xml).find("id").text();
  console.log(id); 

but that just gives me a giant list of all id's and names concatenated together. I want to be able to see them as separate elements.

Answer 1

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xhr.responseText, 'text/xml');
    var name = xmlDoc.getElementsByTagName('first_name')[0].childNodes[0].nodeValue;
    var id = xmlDoc.getElementsByTagName('id')[0].childNodes[0].nodeValue;

    console.log(id, name);
  }
};
xhr.open('GET', 'sample.xml', true);
xhr.send(null);

 // raw xml data // ================================ var data = ` <data> <group_user> <id type="integer">2671029</id> <created_at type="datetime">2013-01-20T21:42:01+00:00</created_at> <comments_count type="integer">0</comments_count> <moderator_at type="datetime" nil="true"/> <user> <id type="integer">5586131</id> <first_name>Melora</first_name> </user> </group_user> <group_user> <id type="integer">2026289</id> <created_at type="datetime">2012-06-08T04:22:38+00:00</created_at> <comments_count type="integer">38</comments_count> <moderator_at type="datetime" nil="true"/> <user> <id type="integer">6082517</id> <first_name>Cindy</first_name> </user> </group_user> </data> `; var parser = new DOMParser(); // parse xml var xmlDoc = parser.parseFromString(data, 'text/xml'); // all <user> tags var userTags = xmlDoc.querySelectorAll('user'); // variable to store user objects var users = [] // each <user> userTags.forEach(function(tag) { // use object creation var user = { // find first <id> tag within <user> id: tag.querySelector('id').textContent, // find first <first_name> tag within <user> name: tag.querySelector('first_name').textContent }; users.push(user); }); // console.log('users:', users); // each user object in users array users.forEach(function(user) { console.log(user.id, user.name); }); 

Answer 2

 var data = ` <data> <group_user> <id type="integer">2671029</id> <created_at type="datetime">2013-01-20T21:42:01+00:00</created_at> <comments_count type="integer">0</comments_count> <moderator_at type="datetime" nil="true"/> <user> <id type="integer">5586131</id> <first_name>Melora</first_name> </user> </group_user> <group_user> <id type="integer">2026289</id> <created_at type="datetime">2012-06-08T04:22:38+00:00</created_at> <comments_count type="integer">38</comments_count> <moderator_at type="datetime" nil="true"/> <user> <id type="integer">6082517</id> <first_name>Cindy</first_name> </user> </group_user> </data> `; var xmlDoc = $.parseXML(data); // var xmlDoc = new DOMParser().parseFromString(data, 'text/xml'); // find all and iterate over each <user> $(xmlDoc).find('user').each(function(index, tag) { // tag -> <user>...</user> // find first occurrence of <first_name> within <user> var first_name = $(tag).find('first_name')[0]; // first_name = tag.querySelector('first_name'); // first_name = tag.getElementsByTagName('first_name')[0]; // find first occurrence of <id> within <user> var id = $(tag).find('id')[0]; // id = tag.querySelector('id'); // id = tag.getElementsByTagName('id')[0] // user object creation var user = { id: $(id).text(), // or // id: id.textContent // id: $(id)[0].textContent, name: $(first_name).text() // or // name: first_name.textContent // name: $(first_name)[0].textContent }; console.log('id: ' + user.id); console.log('name: ' + user.name); }); /* xmlDoc.querySelectorAll('user').forEach(function(tag, index) { // ... }); */ /* var users = xmlDoc.findElementsByTagName('user'); for (var index=0; index<users.length; index++) { var tag = users[index]; // ... } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>