How can i generate tree structure from xml using jquery

Hi,

Please let me know your requirement in more details in more details with example,if possible share your xml and Screenshot of your requirement

Hi,

thanks for your reply,

i need the below output, using jquery and xml

* test

    *child test1

    *child test2

* testing

     *child testing1

      *child testing2

thanks to all

Please share xml File Data.

Hi Shashikant,

please find my xml file data,

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed>

<entry>
  <content>
    <properties>
      <CustomerID>ALFKI</CustomerID>
      <CompanyName>Alfreds Futterkiste</CompanyName>
      <ContactName>Maria Anders</ContactName>
      <ContactTitle>Sales Representative</ContactTitle>
      <Address>Obere Str. 57</Address>
      <City>Berlin</City>     
      <PostalCode>12209</PostalCode>
      <Country>Germany</Country>
      <Phone>030-0074321</Phone>
      <Fax>030-0076545</Fax>
    </properties>
  </content>
</entry>
<entry>

  <content>
    <properties>
      <CustomerID>ANATR</CustomerID>
      <CompanyName>Ana Trujillo Emparedados y helados</CompanyName>
      <ContactName>Ana Trujillo</ContactName>
      <ContactTitle>Owner</ContactTitle>
      <Address>Avda. de la Constitución 2222</Address>
      <City>México D.F.</City>     
      <PostalCode>05021</PostalCode>
      <Country>Mexico</Country>
      <Phone>(5) 555-4729</Phone>
      <Fax>(5) 555-3745</Fax>
    </properties>
  </content>
</entry>


</feed>

thanks in advance

Here I have create sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var xmlData = readXml('<%= ResolveUrl("~/XmlFiles/XMLFile.xml") %>');
            var sHTML = drawTreeFromXml(xmlData);
            document.getElementById("Tree").innerHTML = sHTML;
        });

        function drawTreeFromXml(xmlData) {
            var html = "";
            var properties = xmlData.getElementsByTagName("properties");
            html += ""
            $(properties).each(function () {
                var department = $(this);
                var CustomerID = $(department).find("CustomerID").text();
                html += "<ul><li><a href='javascript:;'>" + CustomerID + "</a></li><ul>";
                var CompanyName = $(department).find("CompanyName").text();
                html += "<li><a href='javascript:;'>" + CompanyName + "</a></li>";
                var ContactName = $(department).find("ContactName").text();
                html += "<li><a href='javascript:;'>" + ContactName + "</a></li>";
                var ContactTitle = $(department).find("ContactTitle").text();
                html += "<li><a href='javascript:;'>" + ContactTitle + "</a></li>";
                var Address = $(department).find("Address").text();
                html += "<li><a href='javascript:;'>" + Address + "</a></li>";
                var City = $(department).find("City").text();
                html += "<li><a href='javascript:;'>" + City + "</a></li>";
                var PostalCode = $(department).find("PostalCode").text();
                html += "<li><a href='javascript:;'>" + PostalCode + "</a></li>";
                var Country = $(department).find("Country").text();
                html += "<li><a href='javascript:;'>" + Country + "</a></li>";
                var Phone = $(department).find("Phone").text();
                html += "<li><a href='javascript:;'>" + Phone + "</a></li>";
                var Fax = $(department).find("Fax").text();
                html += "<li><a href='javascript:;'>" + Fax + "</a></li></ul></li></ul>";
            });
            return html;
        }

        function readXml(xmlFile) {
            var xmlDoc;
            if (typeof window.DOMParser != "undefined") {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", xmlFile, false);
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType('text/xml');
                }
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
            }
            else {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.load(xmlFile);
            }
            return xmlDoc;
        }       
    </script>
    <div id="Tree">
    </div>
</div>

XMLFile.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed>
  <entry>
    <content>
      <properties>
        <CustomerID>ALFKI</CustomerID>
        <CompanyName>Alfreds Futterkiste</CompanyName>
        <ContactName>Maria Anders</ContactName>
        <ContactTitle>Sales Representative</ContactTitle>
        <Address>Obere Str. 57</Address>
        <City>Berlin</City>
        <PostalCode>12209</PostalCode>
        <Country>Germany</Country>
        <Phone>030-0074321</Phone>
        <Fax>030-0076545</Fax>
      </properties>
    </content>
  </entry>
  <entry>
    <content>
      <properties>
        <CustomerID>ANATR</CustomerID>
        <CompanyName>Ana Trujillo Emparedados y helados</CompanyName>
        <ContactName>Ana Trujillo</ContactName>
        <ContactTitle>Owner</ContactTitle>
        <Address>Avda. de la Constitución 2222</Address>
        <City>México D.F.</City>
        <PostalCode>05021</PostalCode>
        <Country>Mexico</Country>
        <Phone>(5) 555-4729</Phone>
        <Fax>(5) 555-3745</Fax>
      </properties>
    </content>
  </entry>
</feed>

Screenshot