[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 756
  • Last Modified:

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>
0
tofeeqs
Asked:
tofeeqs
  • 3
  • 3
1 Solution
 
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
 
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
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

 
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now