get data from XML file using jQuery

Question

I am trying to get an attribute value from an XML file using jQuery, but it returns undefined and the image doesn't load.

In my HTML file I have a <div> with id answer and one <button> with id showInfo.

xml code: 
<?xml version="1.0"?>
    <student studentNum="5678">
        <image>images/mypic.jpg</image>
    </student>

my jQuery code:

$(document).ready(function(){
  $.ajax( {
   url:'stu.xml',
   data:{},
   type:'GET',
   dataType:'xml',
   success: function(resp){

$('#showInfo').click(function () {

   var myInfo = $(resp).find('student');
   myInfo.each(function(index, obj) {

    var myNum = ($(obj).find('student').attr('studentNum'));
    var myImg = $(obj).find('image').text();

    $('#answer').append("<p> " + "Student Number:  " +myNum+   
    "<img src='" + myImg + "'/><br/>" );
});   
});
});

Possible duplicate of [How to parse XML using jQuery?](https://stackoverflow.com/questions/7228141/how-to-parse-xml-using-jquery) — miken32, Jun 09 '17 at 16:35

score 0 · Answer 1 · answered Jun 08 '17 at 22:40

0

obj is instance of <student> so find() isn't applicable for the attribute.

Not sure what proper path to images is ... try adding a leading / if images directory is in root of site

Try

var $student = $(obj);
var myNum = $student.attr('studentNum');
var myImg = $student.find('image').text();

$('#answer').append("<p> " + "Student Number:  " +myNum+   
    "<img src='/" + myImg + "'/><br/>" );

answered Jun 08 '17 at 22:40

charlietfl

170,828
13
121
150

yeah attribute is working fine thanx alot but pic is still not showing up, i will figure it out thanx a lot. – sid Jun 09 '17 at 02:00

score 0 · Answer 2 · edited Jun 09 '17 at 03:21

Just check once with your xml response, i did some minor changes to response xml. Hope that's work for you.

var resp = '<?xml version="1.0"?><students><student studentNum="5678"><images>images/mypic.jpg</images></student><student studentNum="4576"><images>images/mypic.jpg</images></student></students>';

var myInfo = $(resp).find('student');
myInfo.each(function(index, obj) {
    var myNum = ($(obj).attr('studentNum'));
    var myImg = $(obj).find('images').text();
    $('#answer').append("<p> " + "Student Number:  " + myNum + "<img src='" + myImg + "'/><br/>" );
});

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

score 0 · Answer 3 · answered Jun 09 '17 at 16:32

You're needlessly looping over a structure with a single item, which makes things more complicated than they need to be.

$("#showinfo").click(function(){
    // this takes the place of the XHR response
    var xml = $($.parseXML('<?xml version="1.0"?><student studentNum="1255289"><image>https://www.gravatar.com/avatar/5ed02658b2440179f00eeff8beb7aa4c?s=32</image></student>'));

    // get the two values
    var myNum = xml.find("student").attr("studentNum");
    var myImg = xml.find("image").text();

    // create the elements
    var p = $("<p>").text("Student number: " + myNum + " ");
    var img = $("<img>").attr("src", myImg);
    p.append(img);
    $("#answer").append(p);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showinfo">Show</button>
<p id="answer"></p>

get data from XML file using jQuery

3 Answers3