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.

Use `jQuery` it will make it much simpler by utilizing `parseXml()` — Dayan, Jun 05 '17 at 20:12
Does this answer your question? [XML parsing of a variable string in JavaScript](https://stackoverflow.com/questions/649614/xml-parsing-of-a-variable-string-in-javascript) — miken32, Jan 16 '20 at 18:51

William Valhakis · Accepted Answer · 2017-06-06T12:42:25.513

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>

A code dump is not a helpful answer. Explain what you changed from the original, and why! — miken32, Jun 05 '17 at 22:26
In the original I tried xhr 'XMLHttpRequest' request for 'sample.xml' file and then parsed it using 'DOMParser'. It seemed to work, and then I noticed that I can just put the 'xml' in the variable. Then I tried getting all the user objects from the parsed variable, but It did not work. So I wrapped all xml within '' and I think that fixed it. I thought, maybe this is helpful and posted it. Then I watched your script and noticed that you might be using JQuery or something so I tried doing the same in jQuery. — William Valhakis, Jun 05 '17 at 23:36

William Valhakis · Answer 2 · 2017-06-06T01:10:56.253

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);
});

Undefined trying to parse through this xml file

2 Answers2