×
Namespaces

Variants
Actions

How to parse XML file in WRT widget using JQuery

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (09 Jun 2010)
Last edited: hamishwillee (04 Nov 2011)

Contents

Introduction

To parse a remote or a local XML file for your widget, e.g. to display it on-screen, you could use jQuery JavaScript library as solution, for both AJAX call and parsing.


Prerequisites

  • jquery.js must exist in the project folder and be included


Example code

We will use first an AJAX call to get the XML document. If the call was successful, the function XML_parsing_sequence will be called. In the call we will also define data type to be "xml". This will ensure that the passed parameter is in a correct form for parsing.

Functions "each" & "find" will be used in going through the document. First, the "each" is looping the tags with the given name and then "find" will be looking for a specific tag.

Notes:

  • If you would like to search using also by an attribute, you should add them to the XML document. See the comment in code.
  • There are more tags in the XML file in this example, so you could easily try to change the code to find something else, or all of them if you like.


basic.js - code for WRT default JavaScript file

function XML_parsing_sequence(xml)
{
$(xml).find("food").each(function()
{
 
$("#output").append($(this).find("name").text());
 
//Use the line below, if you have added an attribute to the XML file, e.g. <food id="1">
//$("#output").append($(this).attr("id")+"<br />");
 
//Add just one extra line in between each tag to form a list
$("#output").append("<br>");
 
 
});
}


index.html - code for WRT default HTML-file


...
<script language="javascript" type="text/javascript" src="jquery.js"></script>
...
 
<body onLoad="javascript:init();">
 
<div id="output" align="center" ></div>
 
</body>
...


The purpose for the "output" div is to display the results of the parsing, received from the basic.js.


XML file for testing

<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>
two of our famous Belgian Waffles with plenty of real maple syrup
</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>
light Belgian waffles covered with strawberries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>
light Belgian waffles covered with an assortment of fresh berries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>
thick slices made from our homemade sourdough bread
</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>
two eggs, bacon or sausage, toast, and our ever-popular hash browns
</description>
<calories>950</calories>
</food>
</breakfast_menu>


Example output

Media:xml_parsing_jquery.jpg

This page was last modified on 4 November 2011, at 07:35.
60 page views in the last 30 days.
×