CODEWITHSUNDEEP
jqueryxmlxml-parsingnested
user366123
user366123

Reputation: 153

Jquery cannot parse all child elements/nested tags and its attr from XML

I have a page which lists details of magazine news items, but sometimes there will one link to particular magazine and other times there can be more than one.

Problem is jquery parses XML perfectly, but when it comes to child elements/nested tags of links....its messes up. It doesnt list all the child nodes.

HTML

    <script>
      $(document).ready(function(){
   $.ajax({
    type: "GET",
    url: "news.xml",
    cache: false,
    dataType: "xml",
    success: function(xml) {
     $(xml).find('item').each(function(){
      var id = $(this).attr('id');
      var title = $(this).find('title').text();
      var date = $(this).find('date').text();      
      var description = $(this).find('description').text();

       if(description.length >= 250){
       description = description.substring(0, 250)+ '...';
      }   

 $('#page-wrap')
 .append($('<h1 id="link_'+id+'"></h1>').html(title))
 .append($('<em></em>').html(date))
 .append($('<p></p>').html(description))
 .append($('<p></p>').html(name));


      $(this).find('links').each(function(){
          var name = $(this).find('link').attr('name');
       var url = $(this).find('link').text();
      $('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');


      });




     });
    }
   });



  });

     </script>

XML here

<news>
<item id="0">
<title>Main title 1</title>
<date>20 Aug 2010</date>
<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nunc lacus, commodo sit amet euismod vitae, semper quis libero. Praesent nunc nibh, mollis nec elementum et, facilisis sit amet metus. Proin dignissim interdum dui vehicula dapibus. Mauris eget est sed odio blandit tempor vitae quis leo.
</description>
  <links>
   <link name="Hello">123.com</link>
   <link name="HelloJack">123.com</link>
  </links>
 </item>
  <item id="2">
    <title>Main title 2</title>
    <date>20 Aug 2010</date>
    <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nunc lacus, commodo sit amet euismod vitae, semper quis libero. Praesent nunc nibh, mollis nec elementum et, facilisis sit amet metus. Proin dignissim interdum dui vehicula dapibus. Mauris eget est sed odio blandit tempor vitae quis leo.</description>
    <links>
      <link name="Hello">123.com</link>
    </links>
  </item>
</news>

Upvotes: 1

Views: 940

Answers (2)

user366123
user366123

Reputation: 153

Never mind fixed the problem

changed this:

$(this).find('links').each(function(){
      var name = $(this).find('link').attr('name');
   var url = $(this).find('link').text();
  $('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');

TO

$(this).find('link').each(function(){
      var name = $(this).attr('name');
   var url = $(this).text();
  $('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');

Upvotes: 1

Calvin Froedge
Calvin Froedge

Reputation: 16373

This will alert each attribute of the current selector, without having to specify what those attributes are anywhere else:

$.each($(".mySelector"), function() {
    var nodes = this.attributes;
    for(var i=0; i<nodes.length; i++)
    {
      alert(nodes[i].nodeName);
      alert(nodes[i].nodeValue);
    }
});

You could replace the alert with, for example, an appendTo to add them to elements in a container. Let me know if you need more clarification.

Upvotes: 0

Related Questions