How to parse xml using jquery $.parseXML?

Question

I have little experience parsing xml documents so please bear with me. For the past few days I am struggling to parse the xml sample given below!

After searching internet and reading others comments I came to conclusion that the best way is to use $parseXML for the type of xml that I deal with.

I validated the xml and used the following code but I keep getting invalid xml! My goal is to get all string values that belong to one <dict> and use them inside <tr>. So I appreciate if an expert help me fix this broken code.

This is the way i want to place the key values inside div:

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

javascript :

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function myfunction(){
alert("me here");

var xml='<?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>';
    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ); 




$($xml).each(function(){

//alert($(this).find("dict>string").text());
//alert($(this).find("dict>key").text());
alert($(this).find("dict>categoryIcon>string").text());
});

};
</script>
</head>
<body>
<button onclick="myfunction()">parse</button> 
</body>
</html>

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>

score 0 · Answer 1 · answered Oct 07 '16 at 20:45

0

    <script>
    function myfunction() {
        alert("me here");
        var xml = '<?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>';
        xmlDoc = $.parseXML(xml),
        $xml = $(xmlDoc);

        $.each($xml.find('dict string'), function () {
            console.info($(this).text());
        });
    }
    </script>

Or you can also do this in the each statement $xml.find('dict>array dict string')

answered Oct 07 '16 at 20:45

Ross

183
1
6

Thanks for helping.My i know on firefox it doesn't work but works on chrome? How i can get individual key values instead of all key names. For example i want values for following keys name,categoryIcon which is Vegetable and http://www.somsite.com/categories/2.jpg? I tried like this but nothing came out :$.each($xml.find('dict>categoryIcon>string'), function () { – user1788736 Oct 07 '16 at 20:56
your xml is structured wrong you should group the ` ` in an element. Something like this: `id1` With that, then you can just grab all the data and then look for the key and string if needed. Something like this: `$.each($xml.find('dict>data'), function () { var keyText = $(this).find('key').text(); var stringText = $(this).find('string').text(); });` – Ross Oct 07 '16 at 20:59
well the xml is the way i recive it i have no controle on how to change its structure on sever side . So you say there is no way to get key values for each dict? My goal is to get individual key names and their corresponding values so i print them on html – user1788736 Oct 07 '16 at 21:00
1

There is. I will get back with this later when I get home. – Ross Oct 07 '16 at 21:04
I want print each set of dict key vales(string valuse)as one as i showed my first post.Using dict>string prints the string values separately how to print each dict string valuse at once inside ? – user1788736 Oct 08 '16 at 00:46

How to parse xml using jquery $.parseXML?

1 Answers1