iterating xml with jquery

Question

I get an xml response from a jquery ajax request and I want to extract name and price for each item. I am stuck on the best way to handle this. From readings, it seems that rendering XML as a javascript object is best bet, but I am having trouble finding syntax to accomplish this and iterate through ...

$.ajax({
    type: "POST",
    url: "myPgm.php",           
    success: function(xml) {    
        var xmlDoc = $.parseXML(xml);
        // now I want to iterate through the xml payload
        // ....
        }
    })

xml look like this:

<items>
   <item>
       <name>item1</name>
       <price>888</price>
       </item>
  <item>
       <name>item2</name>
       <price>999</price>
   </item>
<items>

See this [answer](http://stackoverflow.com/a/15755526) – Last1Here Feb 13 '15 at 23:55 — Last1Here, Feb 13 '15 at 23:55

ReLeaf · Answer 1 · 2015-02-14T03:43:42.957

It's actually really easy with parseXML. Here's a super simple example:

$(function () {
    var xml = "<items><item><name>item1</name><price>888</price></item><item><name>item2</name><price>999</price></item></items>",
        // parse the XML
        xmlDoc = $.parseXML(xml),
        // convert it to a jQuery Object
        $xml = $(xmlDoc),
        // find out how many items there are to loop over
        itemCount = $xml.find("item").length,
        // create variables for name and price
        $name = $xml.find("name"),
        $price = $xml.find("price")
    ;
    // loop over the items, outputting the name and price for each one
    for ( i=0; i < itemCount; i++) {
         var html = '<li>Name: '+$($name[i]).text()+'<br/>Price: $'+$($price[i]).text()+'</li>';
      // append the items to a ul element
        $('#your-container').append(html);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="your-container"></div>

iterating xml with jquery

1 Answers1