Reading XML file using jQuery

XML is very commonly used for data transmission purposes. Today we will read XML file and print results on page with the help of jQuery library.

For this demo I am going to use XML file generated from one of the weather API of Google.

Snapshot:

Here is the XML data I am using for this demo:

?xml version="1.0"?>

<xml_api_reply version="1">

<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0" >

<forecast_information>

<city data="Manhattan New York, NY"/>

<postal_code data="10026"/>

<latitude_e6 data=""/>

<longitude_e6 data=""/>

<forecast_date data="2011-09-13"/>

<current_date_time data="2011-09-13 16:55:00 +0000"/>

<unit_system data="US"/>

</forecast_information>

<current_conditions>

<condition data="Clear"/>

<temp_f data="88"/>

<temp_c data="31"/>

<humidity data="Humidity: 33%"/>

<icon data="/ig/images/weather/sunny.gif"/>

<wind_condition data="Wind: N at 0 mph"/>

</current_conditions>

</weather>

</xml_api_reply>

 

I have saved this file in the same directory as my .aspx file with name as Sample.xml.

Next we will add three div tags one as parent within that one for header and another for content:

<div>

<div id="header"></div>

<div id="content"></div>

</div>

 

Now add some style to our divs:

<style type="text/css">

#content{background-color:white;border:1px solid blue;}

 

#header{background-color:lightgray;border:1px solid gray;font-size:large; padding-left:2px;}

#header span#zip{font-size:small; color:Blue; vertical-align:text-top;}

#header span#dateText{float:right;}

#content div img{float:left;}

#content div span{padding-left:5px;}

#content{height:40px;}

</style>

 

Next we will write JavaScript to read XML file:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

// get call to read sample.xml file

$.get("sample.xml", {}, function (data) {

// data that we received from get call

// we will iterate one by one to traverse all nodes with that name

$("forecast_information", data).each(function (i) {

// temporary text holding variable

var temText = "";

// with find we can find specific node by passing its name and

// can get text inside the node using find("city").text()

// or by selecting attribute as shown below

temText = $(this).find("city").attr("data");

temText += " <span id='zip'>(" + $(this).find("postal_code").attr("data") + ")</span>";

temText += "<span id='dateText'> Forecast for: " + $(this).find("forecast_date").attr("data");

$('#header').html(temText);

 

});

$("current_conditions", data).each(function (i) {

var temText = "";

temText = "<div>";

temText += "<img src='http://www.google.com" + $(this).find("icon").attr("data") + "' />";

temText += "<span> Condition: " + $(this).find("condition").attr("data") + "<br />";

temText += "&nbsp; Temperature: " + $(this).find("temp_f").attr("data") + " F | "

+ $(this).find("temp_c").attr("data") + " C (" + $(this).find("humidity").attr("data") +

") "+$(this).find("wind_condition").attr("data")+"<br />";

temText += "</span></div>";

$('#content').html(temText);

});

});

});

</script>

 

Complete code:

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

// get call to read sample.xml file

$.get("sample.xml", {}, function (data) {

// data that we received from get call

// we will iterate one by one to traverse all nodes with that name

$("forecast_information", data).each(function (i) {

// temporary text holding variable

var temText = "";

// with find we can find specific node by passing its name and

// can get text inside the node using find("city").text()

// or by selecting attribute as shown below

temText = $(this).find("city").attr("data");

temText += " <span id='zip'>(" + $(this).find("postal_code").attr("data") + ")</span>";

temText += "<span id='dateText'> Forecast for: " + $(this).find("forecast_date").attr("data");

$('#header').html(temText);

 

});

$("current_conditions", data).each(function (i) {

var temText = "";

temText = "<div>";

temText += "<img src='http://www.google.com" + $(this).find("icon").attr("data") + "' />";

temText += "<span> Condition: " + $(this).find("condition").attr("data") + "<br />";

temText += "&nbsp; Temperature: " + $(this).find("temp_f").attr("data") + " F | "

+ $(this).find("temp_c").attr("data") + " C (" + $(this).find("humidity").attr("data") +

") "+$(this).find("wind_condition").attr("data")+"<br />";

temText += "</span></div>";

$('#content').html(temText);

});

});

});

</script>

<style type="text/css">

#content{background-color:white;border:1px solid blue;}

 

#header{background-color:lightgray;border:1px solid gray;font-size:large; padding-left:2px;}

#header span#zip{font-size:small; color:Blue; vertical-align:text-top;}

#header span#dateText{float:right;}

#content div img{float:left;}

#content div span{padding-left:5px;}

#content{height:40px;}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<div id="header"></div>

<div id="content"></div>

</div>

</form>

</body>

</html>

 

 

Tags: , ,

ASP.NET | jQuery | XML