Traversing XML file using JQuery

I have an xml file with nested and repeating entries, I want to traverse the xml with JQuery would any one help me to traverse it.
I have used find() method of jquery but it doesn't care about child parent relation ship.

below is the xml

<products>
  <category>
    <categoryid>2</categoryid>
    <categoryname>Lunch</categoryname>
    <category>
      <categoryid>5</categoryid>
      <categoryname>Snacks</categoryname>
      <product>
        <productid>003</productid>
        <productname>Hot Dog</productname>
        <productdesc>Big old greasy breakfast</productdesc>
        <productprice>20.00</productprice>
        <tax-sales>13</tax-sales>
        <tax-service>10</tax-service>
      </product>
    </category>
    <category>
      <categoryid>6</categoryid>
      <categoryname>Dinner</categoryname>
      <category>
        <categoryid>7</categoryid>
        <categoryname>Chinese</categoryname>
        <category>
          <categoryid>8</categoryid>
          <categoryname>Starters</categoryname>
          <product>
            <productid>003</productid>
            <productname>Dumplings</productname>
            <productdesc>Big old greasy breakfast</productdesc>
            <productprice>20.00</productprice>
            <tax-sales>13</tax-sales>
            <tax-service>10</tax-service>
          </product>
        </category>
       
       
      </category>
      <category>
        <categoryid>11</categoryid>
        <categoryname>Mexican</categoryname>
        <category>
          <categoryid>8</categoryid>
          <categoryname>Starters</categoryname>
          <product>
            <productid>003</productid>
            <productname>Dumplings</productname>
            <productdesc>Big old greasy breakfast</productdesc>
            <productprice>20.00</productprice>
            <tax-sales>13</tax-sales>
            <tax-service>10</tax-service>
          </product>
        </category>
        <product>
          <productid>001</productid>
          <productname>soup</productname>
          <productdesc>2 pieces of toast with butter and jam</productdesc>
          <productprice>12.00</productprice>
          <tax-sales>13</tax-sales>
          <tax-service>10</tax-service>
        </product>
      </category>
      <product>
        <productid>001</productid>
        <productname>soup</productname>
        <productdesc>2 pieces of toast with butter and jam</productdesc>
        <productprice>12.00</productprice>
        <tax-sales>13</tax-sales>
        <tax-service>10</tax-service>
      </product>
    </category>
  </category>
</products>
tofeeqsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve KrileCommented:
In the simplest use, you can loop through any "node" of xml using .find() coupled with .each().

I've attached a simple example where I loop through your above xml and alert() the productID.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
 	body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
	ul.tabs {padding:0;margin:0;list-style-type:none;}
	ul.tabs li {float:left;padding:5px;}
	ul.tabs li a {text-decoration:none;padding:10px;outline:none;background:#ccc;color:gray;}
	ul.tabs li a.active {border:solid 1px #aaa;color:#000;}
	ul.tabs li a:hover {background:#aaa; color:#fff;}

	div.panes {clear:both;border:solid 1px gray;min-height:20px;margin:5px;width:600px;}
	div.pane {display:none;padding:5px;margin:5px;}

</style>

</head>


<body>

<textarea id="xmlData" style="height:400px;width:400px;">
<products>
  <category>
    <categoryid>2</categoryid>
    <categoryname>Lunch</categoryname>
    <category>
      <categoryid>5</categoryid>
      <categoryname>Snacks</categoryname>
      <product>
        <productid>003</productid>
        <productname>Hot Dog</productname>
        <productdesc>Big old greasy breakfast</productdesc>
        <productprice>20.00</productprice>
        <tax-sales>13</tax-sales>
        <tax-service>10</tax-service>
      </product>
    </category>
    <category>
      <categoryid>6</categoryid>
      <categoryname>Dinner</categoryname>
      <category>
        <categoryid>7</categoryid>
        <categoryname>Chinese</categoryname>
        <category>
          <categoryid>8</categoryid>
          <categoryname>Starters</categoryname>
          <product>
            <productid>003</productid>
            <productname>Dumplings</productname>
            <productdesc>Big old greasy breakfast</productdesc>
            <productprice>20.00</productprice>
            <tax-sales>13</tax-sales>
            <tax-service>10</tax-service>
          </product>
        </category>


      </category>
      <category>
        <categoryid>11</categoryid>
        <categoryname>Mexican</categoryname>
        <category>
          <categoryid>8</categoryid>
          <categoryname>Starters</categoryname>
          <product>
            <productid>003</productid>
            <productname>Dumplings</productname>
            <productdesc>Big old greasy breakfast</productdesc>
            <productprice>20.00</productprice>
            <tax-sales>13</tax-sales>
            <tax-service>10</tax-service>
          </product>
        </category>
        <product>
          <productid>001</productid>
          <productname>soup</productname>
          <productdesc>2 pieces of toast with butter and jam</productdesc>
          <productprice>12.00</productprice>
          <tax-sales>13</tax-sales>
          <tax-service>10</tax-service>
        </product>
      </category>
      <product>
        <productid>001</productid>
        <productname>soup</productname>
        <productdesc>2 pieces of toast with butter and jam</productdesc>
        <productprice>12.00</productprice>
        <tax-sales>13</tax-sales>
        <tax-service>10</tax-service>
      </product>
    </category>
  </category>
</products>
</textarea>

</body>

<script>

	$(document).ready(function(){
		var xmlData = $("#xmlData").val();
		$(xmlData).find("product").each(function(){
			alert($(this).find("productid").text());
		});
	});


</script>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tofeeqsAuthor Commented:
I think you got it wrong, I need to traverse xml to make a menu.
like
<ul>
  <li>Lunch
     <ul>
        <li>Snacks
           <ul>
              <li>003 Hot Dog</li>
          </ul>
       </li>
   </ul>
 </li>
<ul>

where lunch is the top category, Snacks is the sub category of Lunch and Hot dog is product of the Snacks

I hope now you could have clear understanding

Regards
0
Steve KrileCommented:
I think I see your issue.  It is considered poor practice to structure your XML with sub nodes containing the same name as parent nodes.  In fact, you won't be able to parse this structure with ANY solution very easily.  Might I suggest (if it is possible) to change the names of your sub nodes.  That will make parsing and rendering html much easier.  Perhaps something like this.  

I've reorganized your XML such that there is one parent node:  Products.  
Then, there are repeating child nodes called Product.
Each Product then has attributes like Category, Subcategory, Classification, Tax, and some stand-alone attributes (id, description, and price).

This structure will be much easier to traverse and render html.  What do you think?

<products>
	<product>
		<category>
			<id>2</id>
			<name>Lunch</name>
		</category>
		<subcategory>
			<id>5</id>
			<name>Snacks</name>
		</subcategory>
		<productid>003</productid>
		<productname>Hot Dog</productname>
		<productdesc>Big old greasy breakfast</productdesc>
		<productprice>20.00</productprice>
		<taxes>
			<sales>13</sales>
			<service>10</service>
		</taxes>
	</product>

	<product>
		<category>
			<id>6</id>
			<name>Dinner</name>
		</category>
		<subcategory>
			<id>7</id>
			<name>Chinese</name>
		</subcategory>
		<classification>
			<id>8</id>
			<name>Starters</name>
		</classification>
		<productid>003</productid>
		<productname>Dumplings</productname>
		<productdesc>Big old greasy breakfast</productdesc>
		<productprice>20.00</productprice>
		<taxes>
			<sales>13</sales>
			<service>10</service>
		</taxes>
	</product>

</products>

Open in new window

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

tofeeqsAuthor Commented:
yes now you exactly approached the problem, but the problem is the xml is not written by myself, it comes from a third party site, so we need to traverse it as it is
0
Steve KrileCommented:
Offering an XML feed with poorly structured data is terrible.  If you are paying for that feed, stop  :)

You should get the thought of "traversing" the xml out of your head.  You are going to have to write some very custom (and fragile) code to turn the thing you posted at the top of this problem in to recognizable HTML automatically.

One approach would be to hack up all the characters and go one by one inspecting the character type and making code-based decisions ("if it's a <, then that's the start of a tag" ELSE if it's "</" then that's the end of a tag).  As you can guess, this is a particularly problematic approach and easy to break.

Another approach is to use regular expressions to look for "sections" of the code.  

But in the end, you still won't know parent and child relationship to build the <ul> and sub <ul> structure you requested in your second post.
0
tofeeqsAuthor Commented:
yes Skrile you are absolutely right, this is quite terrible to parse the bad structured xml but i have no other way to do traverse it :-(
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
XML

From novice to tech pro — start learning today.