I want to read an xml file using JQuery. the code is doing almost what I want except reading text part of a linke element in my XML file. My code snippets are presented as below:
html file:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1"; charset="UTF-8">
<head><title>Reading XML File Using jQuery AJAX Method</title>
</head>
<body>
<h2> How To Read XML Data - 2 </h2>
<div class='timeline'>
<ul></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src="raReadXMLByJquery-2.js" type="text/javascript"></script>
</body>
</html>
xml file named as raReadXMLByJQuery-2.xml:
< ?xml version="1.0" ?>
<statuses>
<status id='555'>
<id> 123</id>
<text>This is text 1</text>
<link> http://google.com </link>
<link> http://google.co.uk </link>
<user>
<name> Jack </name>
</user>
</status>
<status id='666'>
<id> 456 </id>
<text>This is text 2</text>
<link> http://google.com </link>
<link> http://google.co.uk </link>
<user>
<name> Sara </name>
</user>
</status>
</statuses>
javascript file named as raReadXMLByJquery-2.js:
$(document).ready( function() { //11
$.ajax({ //22
url: 'raReadXMLByJQuery-2.xml',
//dataType: 'xml', //this line is not working
dataType: 'text',
success: function (data){ //44
$(data).find('status').each ( function() { //55
var status = $(this).find('text').text();
var id = $(this).attr('id');
var user = $(this).find('user name').text();
var link = $(this).find('link').text();
alert (link);
$('.timeline ul').append ( //66
$('<li />', { //77
text: '(' + id + ') ' + status + ' - ' + user + ' - ' + link //9999
}) //77
); //66
}); //55
}, //44
error: function(){ //33
$('.timeline').text('There was an error baby!');
} //33
}); //22
}); //11
each part is doing its function except alert that outputs nothing and consequently text part of link elemet in code line identified by //9999
Why is that so?
It seems to be simple, but I do not find the issu.
>Solution :
The issue is because <link /> is a reserved node name. Change it to something else, such as url, and your code works correctly:
const data = `<?xml version="1.0"?><statuses><status id='555'><id> 123</id><text>This is text 1</text><url> http://google.com </url><url> http://google.co.uk </url><user><name> Jack </name></user></status><status id='666'><id> 456 </id><text>This is text 2</text><url> http://google.com </url><url> http://google.co.uk </url><user><name>Sara</name></user></status></statuses>`
$(data).find('status').each(function() {
var status = $(this).find('text').text();
var id = $(this).attr('id');
var user = $(this).find('user name').text();
var link = $(this).find('url').text();
$('.timeline ul').append(
$('<li />', {
text: '(' + id + ') ' + status + ' - ' + user + ' - ' + link
})
);
});<div class='timeline'>
<ul></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>