array from xml item

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I need to create an array of items. the array should contain the same number of items as my xml file holds "image" tags. Then, I need jquery to create an <li></li> and append it to an already established <ul></ul> in my html for each item in my array. here's my codes, abridged:

HTML Code: [ Select ]
<div id="webthumbcontainer">
     <ul id="webthumblist">
 
     </ul>
</div>
 
  1. <div id="webthumbcontainer">
  2.      <ul id="webthumblist">
  3.  
  4.      </ul>
  5. </div>
  6.  


XML Code: [ Select ]
<category id="web">
      <image>
         <link>tadesign/images/carcare.jpg</link>
         <description>Description text goes here about carcaredetail</description>
      </image>
      <image>
         <link>tadesign/images/monster.jpg</link>
         <description>Description text goes here about monster resolution</description>
      </image>
      <image>
         <link>tadesign/images/rantingbill.jpg</link>
         <description>Description text goes here about rantingbill</description>
      </image>
      <image>
         <link>tadesign/images/voltecsite.jpg</link>
         <description>Description text goes here about voltec design</description>
      </image>
</category>
 
  1. <category id="web">
  2.       <image>
  3.          <link>tadesign/images/carcare.jpg</link>
  4.          <description>Description text goes here about carcaredetail</description>
  5.       </image>
  6.       <image>
  7.          <link>tadesign/images/monster.jpg</link>
  8.          <description>Description text goes here about monster resolution</description>
  9.       </image>
  10.       <image>
  11.          <link>tadesign/images/rantingbill.jpg</link>
  12.          <description>Description text goes here about rantingbill</description>
  13.       </image>
  14.       <image>
  15.          <link>tadesign/images/voltecsite.jpg</link>
  16.          <description>Description text goes here about voltec design</description>
  17.       </image>
  18. </category>
  19.  


JAVASCRIPT Code: [ Select ]
$.ajax({
url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
 
 
success: function()
   {
   
   $(this).find('label').each(function(){
                         var blocks = $(xml).makeArray($(this).each('images'));
 
                         $('<li><a href="#"></a></li>')
                             .html(blocks).each()
                             .appendTo('#webthumblist');
       });
   
       }
   
});
 
  1. $.ajax({
  2. url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  3.  
  4.  
  5. success: function()
  6.    {
  7.    
  8.    $(this).find('label').each(function(){
  9.                          var blocks = $(xml).makeArray($(this).each('images'));
  10.  
  11.                          $('<li><a href="#"></a></li>')
  12.                              .html(blocks).each()
  13.                              .appendTo('#webthumblist');
  14.        });
  15.    
  16.        }
  17.    
  18. });
  19.  


I'm trying my best here but I just don't know enough about xml, javascript, jquery, or ajax to get this done by myself. I've been researching like a madman but I'd appreciate your guys' input.

Essentially, I should get 4 objects in my array. I should also have 4 <li> in my <ul id="webthumblist">.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

looks like I was close, here's what someone on another forum gave me:

JAVASCRIPT Code: [ Select ]
$.ajax({
url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
 
 
success: function(xml)
   {
   
   $(xml).find('#web image').each(function(){
                     $("#webthumblist").append("<li><a href=\"#\" id=\"" + $(xml).find('#web image').index(this) + '></a></li>');
                  });
};
});
 
  1. $.ajax({
  2. url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  3.  
  4.  
  5. success: function(xml)
  6.    {
  7.    
  8.    $(xml).find('#web image').each(function(){
  9.                      $("#webthumblist").append("<li><a href=\"#\" id=\"" + $(xml).find('#web image').index(this) + '></a></li>');
  10.                   });
  11. };
  12. });
  13.  
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

here's a question, my javascript is running over the entire array instead of each item. Not sure why.

example


Look at the paragraphs, they're all generated based on the xml ajax call. here's the jquery for the generated paragraph content:

JAVASCRIPT Code: [ Select ]
$(xml).find('#web description').each(function(){
         var desc = $(xml).find('#web description').text();
                     $("#textcontainer").append('<p>' + desc + '</p');
   });
 
  1. $(xml).find('#web description').each(function(){
  2.          var desc = $(xml).find('#web description').text();
  3.                      $("#textcontainer").append('<p>' + desc + '</p');
  4.    });
  5.  


and here's my xml file
XML Code: [ Select ]
<root>
   <category id="web">
      <image></image>
      <link>tadesign/images/carcare.jpg</link>
      <description>Description text goes here about carcaredetail</description>
     
      <image></image>
      <link>tadesign/images/monster.jpg</link>
      <description>Description text goes here about monster resolution</description>
     
      <image></image>
      <link>tadesign/images/rantingbill.jpg</link>
      <description>Description text goes here about rantingbill</description>
     
      <image></image>
      <link>tadesign/images/voltecsite.jpg</link>
      <description>Description text goes here about voltec design</description>
     
   </category>
</root>
 
  1. <root>
  2.    <category id="web">
  3.       <image></image>
  4.       <link>tadesign/images/carcare.jpg</link>
  5.       <description>Description text goes here about carcaredetail</description>
  6.      
  7.       <image></image>
  8.       <link>tadesign/images/monster.jpg</link>
  9.       <description>Description text goes here about monster resolution</description>
  10.      
  11.       <image></image>
  12.       <link>tadesign/images/rantingbill.jpg</link>
  13.       <description>Description text goes here about rantingbill</description>
  14.      
  15.       <image></image>
  16.       <link>tadesign/images/voltecsite.jpg</link>
  17.       <description>Description text goes here about voltec design</description>
  18.      
  19.    </category>
  20. </root>
  21.  
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You don't need the semicolon closing the success param and you need to simplify/rework your bit inside find().each() to avoid putting every desc. in once for every entry you have (and close your </p> tag). Try like this:

Code: [ Select ]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>

<div id="textcontainer">
Some text here
</div>

<script language="javascript">
$.ajax({
    url: "img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
    success: function(xml) {
        $(xml).find('#web description').each(function(){
            $("#textcontainer").append('<p>' + $(this).text() + '</p>');
        });
    }
});
</script>
</body>
</html>
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  4. </head>
  5. <body>
  6. <div id="textcontainer">
  7. Some text here
  8. </div>
  9. <script language="javascript">
  10. $.ajax({
  11.     url: "img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  12.     success: function(xml) {
  13.         $(xml).find('#web description').each(function(){
  14.             $("#textcontainer").append('<p>' + $(this).text() + '</p>');
  15.         });
  16.     }
  17. });
  18. </script>
  19. </body>
  20. </html>


(My img.xml was identical to yours given in your last example)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 136 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.