Absolute Thoughts....

  Home  |   Contact  |   Syndication    |   Login
  9 Posts | 0 Stories | 12 Comments | 0 Trackbacks

News

Archives

Image Galleries

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>


posted on Friday, May 2, 2014 12:32 AM