Saturday, January 31, 2015
PhoneGap Tutorial Parsing xml file using javascipt and displaying the data on the android and ios mobile screens
Title : I am going to explain u how to parse xml file and display data on your mobile screen.
Description : In todays world every business application need to contact webservices or xml services or xml files in the server and parse the files and need to display some results on the screen.for example take a live cricket score card : in the server we write a program where the score will be updated ball by ball,run by run in the web service , and the xml file also get updated with the live score and now the our application screen should also contact the webservice every 5 seconds and parse xml file and will update the live score for us , I will explain this with source code latter , for now i will explain you a simple example.
Here is the xml file which we are going to parse.
MakeMyTrip.com
MakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/makemytrip-logo.jpg
GoIbibo.com
GoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/goibibo_logo.png
Abhibus.com
Abhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/abhibus-logo.png
Travelyaari.com
Travelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/travelyaari-com-logo-w240.png
Redbus.in
Redbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/logo_bc9228d_163.jpg
Expedia.co.in
Expedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/expedia-logo.png
Other websites
We Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/travel-agency-logos.jpg
Now we have to parse the above file using java script and display the results using html5. Here is the html and javascript code to parse this xml file.
Javascript file
function travel(){
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Travel.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
travels = xmlDoc.getElementsByTagName("website");
alert("travels:"+travels.length);
var websites = [];
var description = [];
var logos = [];
for(var travel=0;travelvar websitename = travels[travel].getElementsByTagName("sitename")[0].childNodes[0].nodeValue;
websites.push(websitename);
var des = travels[travel].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
description.push(des);
var images = travels[travel].getElementsByTagName("Image")[0].childNodes[0].nodeValue;
logos.push(images);
}
var listview = document.getElementById("container");
var ul = document.createElement("ul");
for(var i=0;ivar livalue= document.createTextNode(websites[i]);
var desvalue = document.createTextNode(description[i]);
var li = document.createElement("li");
var table = document.createElement("table");
var table1 = document.createElement("table");
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
var img = new Image();
img.src= logos[i];
img.setAttribute("width",60);
img.setAttribute("height",30);
img.setAttribute(onclick, "test()");
td1.appendChild(img);
tr1.appendChild(td1);
var tr2 = document.createElement("tr");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td2.appendChild(livalue);
td3.appendChild(desvalue);
tr1.appendChild(td2);
tr2.appendChild(td3);
table.appendChild(tr1);
table1.appendChild(tr2);
li.appendChild(table);
li.appendChild(table1);
ul.appendChild(li);
}
listview.appendChild(ul);
}
Html File
Minimal AppLaud App
Coupons Shop
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.