Lets take a sample XML file and name it as Meeting.xml.
<?xml version="1.0" encoding="utf-8"?>
<billing>
<item>
<id>1</id>
<customer>Pavan Kumar Pabothu</customer>
<type>Personal Meeting</type>
<date>4/5/2012</date>
<hours>1</hours>
<contact>
<phone>
<no>279102</no>
<type>home</type>
</phone>
<phone>
<no>9999995929</no>
<type>mobile</type>
</phone>
</contact>
</item>
<item>
<id>2</id>
<customer>Reddaiah Raju</customer>
<type>Official Meeting</type>
<date>3/20/2014</date>
<hours>4</hours>
<contact>
<phone>
<no>2375226</no>
<type>home</type>
</phone>
<phone>
<no>998884888</no>
<type>mobile</type>
</phone>
</contact>
</item>
<item>
<id>3</id>
<customer>Kishan Chand Yadav</customer>
<type>Party</type>
<date>4/20/2014</date>
<hours>1</hours>
<contact>
<phone>
<no>9988776652</no>
<type>home</type>
</phone>
<phone>
<no>9988776654</no>
<type>mobile</type>
</phone>
</contact>
</item>
</billing>
We can read the XML using below code.
<html>
<head>
<title></title>
<script src="Scripts/lib/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#dvContent").append("<ul></ul>");
var customerInfo = [];
$.get("Data/Meeting.xml", function (xml) {
$('item', xml).each(function () {
// Converting a XML to JSON object.
var loc = {
"ID": $(this).find("id").text(),
"Name": $(this).find("customer").text(),
"Type": $(this).find("type").first().text(),
"Date": $(this).find("date").text(),
"Hours": $(this).find("hours").text(),
"Contacts": {
"Phone": $.map($(this).find("phone").toArray(), function (item) {
return { "Type": $(item).find("type").text(), "No": $(item).find("no").text() };
})
}
};
customerInfo.push(loc);
// Reading and displaying a JSON object in HTML.
$("<li></li>").html("Name : " + loc.Name + "<br /> Contacts: <br />" + $.map($(loc.Contacts.Phone).toArray(), function (item) {
return item.Type + ": " + item.No + "<br/>";
}).join("")).append("<br>").appendTo("#dvContent ul");
});
});
});
</script>
</head>
<body>
<div id="dvContent">
</div>
</body>
</html>