How to parse xml key name and its value using javascript?

Question

I am receiving an xml data like the example below from a remote api. Could anyone show me how I can get the key names and their corresponding key values and print them? For example I want to print all categoryIcon and category values.

javascript :

$.get("http://www.someapisite.com/test.php",
        {

          dataType: "jsonp"
        },

        function(data,status){

       //here i want to print the key names and its corresponding values
}

xml to parse:

<?xml version="1.0" encoding="UTF-8"?>
<dict><key>ItemLists</key>
<array><dict><key>id</key>
<string>1</string>
<key>name</key>
<string>fruits</string>
<key>category</key>
<string>US Fruits</string>
<key>categoryIcon</key>
<string>http://www.somsite.com/categories/1.jpg</string>
<key>country</key>
<string>US</string>
</dict>

<dict><key>id</key>
<string>2</string>
<key>name</key>
<string>Vegetable</string>
<key>category</key>
<string>Eu Vegetable</string>
<key>categoryIcon</key>
<string>http://www.somsite.com/categories/2.jpg</string>
<key>country</key>
<string>EU</string>
</dict>

</array>
</dict>

edit:

For each set of dict i want to print a <tr> just like this:

 var div = "<tr id=\""+i+"\">\n" +
    "<td>"+i+"</td>\n" +
    "<td><img src=\""+ categoryIcon +"\" height=\"42\" width=\"42\"></td>\n" +
    "<td>\n" +
    "<a href=\"javascript:doit('id=" + id + "&name=" + name + "&category=" + category + "&categoryIcon=" + categoryIcon + "','"+ country +"')\" onclick=\"selectLink(this);\">" + name + "</a><br> \n" +
    "<br></td></tr>\n\n";

    $("#myDiv").append(div);

Possible duplicate of [Cross-Browser Javascript XML Parsing](http://stackoverflow.com/questions/7949752/cross-browser-javascript-xml-parsing) — devlin carnate, Oct 06 '16 at 17:49
[How to parse XML using jQuery?](http://stackoverflow.com/questions/7228141/how-to-parse-xml-using-jquery) — Mohammad, Oct 06 '16 at 18:32
@Mohammad Thanks for the link . I know how to get the key names using the link you provided but how to get individual key values ? This is how i got key names but i want key values : $.each($xml.find('dict>key'), function (i) { var keyName = $(this).text(); alert(keyName); } — user1788736, Oct 07 '16 at 22:38

score 1 · Answer 1 · answered Oct 08 '16 at 07:58

First you need to parses string into an XML document using parseXML() then you can find your key/value in document. You should find key tag in array tag and iterate it using .each(). Also value of key is in next string tag that you can use .next() to select it.

var xml = $("#xml").html();
$(xml).find("array key").each(function(){
    var key = $(this).text();
    var value = $(this).next().text();  
    console.log(key + "=" + value);
});

var xml = $("#xml").html();
$(xml).find("array key").each(function(){
    console.log($(this).text() +"="+ $(this).next().text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xml">
  <dict>
    <key>ItemLists</key>
    <array>
      <dict>
        <key>id</key>
        <string>1</string>
        <key>name</key>
        <string>fruits</string>
        <key>category</key>
        <string>US Fruits</string>
        <key>categoryIcon</key>
        <string>http://www.somsite.com/categories/1.jpg</string>
        <key>country</key>
        <string>US</string>
      </dict>
      <dict>
        <key>id</key>
        <string>2</string>
        <key>name</key>
        <string>Vegetable</string>
        <key>category</key>
        <string>Eu Vegetable</string>
        <key>categoryIcon</key>
        <string>http://www.somsite.com/categories/2.jpg</string>
        <key>country</key>
        <string>EU</string>
      </dict>
    </array>
  </dict>
</div>

Thanks for helping me . But i want to print each set of key values(string values ) in the a exactly as shown in my first post.See my first post edit part.So how to print each set of into a as shown in my edit part of my first post? My goal is to use each set of string values inside sample — user1788736, Oct 08 '16 at 11:23

How to parse xml key name and its value using javascript?

1 Answers1