未定义试图通过这个xml文件解析

Question

所以我肯定是一个初学者，当谈到JavaScript和jQuery，我目前正试图解析通过这个XML（这是一个API调用的响应）。我遇到的问题是我不知道如何解析通过XML文件，以获得一些价值观。

<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_users）我想存储/ consolelog所有的id和所有的名字。

现在我做：

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

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

但只是给了我所有的ID和名字连接在一起的一个巨大的列表。我希望能够将它们看作独立的元素。

Answer 1

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>

Answer 2

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