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

@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
– user1788736, Commented Oct 7, 2016 at 22:38

Mohammad · Accepted Answer · 2016-10-08 07:58:16Z

1

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>

answered Oct 8, 2016 at 7:58

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1788736 Over a year ago

Thanks for helping me . But i want to print each set of <dict> key values(string values ) in the a <tr> exactly as shown in my first post.See my first post edit part.So how to print each set of <dict> into a <tr> as shown in my edit part of my first post? My goal is to use each set of <dict> string values inside sample <tr>

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related