How to I parse multiple items using jQuery and Ajax?

Question

I'm trying to parse multiple items from an XML file using jQuery Ajax for the xml structure:

<titles>
    <titleitem>
        <authors>
            <author>1</author>
            <author>2</author>
            <author>3</author>
        </authors>
    </titleitem>
</titles>

where each <titleitem> has a different number of authors (or, not shown in the example above, also a varying number of topics).

My exact jQuery and XML are below. What is happening with my current code is that all <author>'s are being listed for each item, instead of only the <author>'s for that specific <titleitem> being listed. If you can help me with this, I would really appreciate it.

In addition to the above, I also need to have a specific url for each <author> and a specific url for each <topic>. I don't have these urls in the below XML yet. Could you show me how to add that specific URL for each <author> and <topic>?

Thank you very much!

XML:

<titles>

  <titleitem id="0">
    <title>This is one title</title>
    <subtitle>This is an example of a subtitle</subtitle>
    <authors>
      <author>Steve Johnson</author>
      <author>Michael Smith</author>
    </authors>
    <topics>
      <topic>Technology</topic>
    </topics>
    <imagelg type="html"><![CDATA[http://www.google.com/serverfiles/productimages/sf113072b.jpg]]></imagelg>
    <url type="html"><![CDATA[http://www.google.com/ProductDetail.aspx?ProductId=123456]]></url>
    <desc>
      <brief type="html"><![CDATA[This is a brief description]]></brief>
      <long type="html"><![CDATA[text here]]></long>
    </desc>
  </titleitem>

  <titleitem id="1">
    <title>This is another title</title>
    <subtitle>This is an example of a subtitle</subtitle>
    <authors>
      <author>John Williams</author>
    </authors>
    <topics>
      <topic>Management</topic>
      <topic>Info</topic>
      <topic>Systems</topic>
    </topics>
    <imagelg type="html"><![CDATA[http://www.google.com/serverfiles/productimages/sf113075b.jpg]]></imagelg>
    <url type="html"><![CDATA[http://www.google.com/ProductDetail.aspx?ProductId=123456]]></url>
    <desc>
      <brief type="html"><![CDATA[This is a brief description]]></brief>
      <long type="html"><![CDATA[text here]]></long>
    </desc>
  </titleitem>
<titles>

jQuery:

$.ajax({
  type: "GET", 
  dataType: "xml", 
  cache: false, 
  async: false, 
  url: xmlTitlesContent, 
  success: parTitlesCon, 
  error: parseError
});

function parTitlesCon(xml) {
  $(xml).find('titleitem').each(function(){
    var id         = $(this).attr('id');
    var title       = $(this).find('title').text();
    var subtitle     = $(this).find('subtitle').text();
    var imagelg     = $(this).find('imagelg').text();
    var url       = $(this).find('url').text();

    $('<div class="titleitems" id="link_'+id+'"></div>')
      .html('<div class="itemcontainer"><div class="itemsmimage"><a href="#"><img src="'+imagelg+'" alt="'+title+'" /></a></div><div class="itemcontent"><div class="itemtitle"><a href="#">'+title+'</a></div><div class="itemsubtitle">'+subtitle+'</div><div class="itemauthor"><span class="authorbytxt">By</span></div><div class="itemtopics"><div class="itemtopicstitle">Topics</div><div class="itemtopiclist"></div><div class="clear"></div></div><div class="clear"></div></div><div class="clear"></div></div>')
      .appendTo('#contentloaded');
    $(this).find('authors').each(function(){
      var author     = $(this).find('author').text();
      $('<a href="#"></a>').html(author).appendTo('div.itemauthor');
    });
    $(this).find('topics').each(function(){
      var topic     = $(this).find('topic').text();
      $('<span class="topic"></div>').html(topic).appendTo('div.itemtopiclist');
    });

  });
}

function parseError() {

  // Error Message
  var parseErrorMessage = 'There was a problem loading the content. Please try again later.';

  // Append Notice in Content Body
  $('#contentloaded').append('Not content available');

  // Append Popup to Body
  $('body').append('<div class="ariasXMLLoadError"><div class="ariasXMLLoadError_inside"><div class="ariasXMLLoadError_info">'+ parseErrorMessage +'<div class="clear"></div></div><div class="clear"></div></div><div class="clear"></div></div>');

  // FadeIn/FadeOut Popup
  $('div.ariasXMLLoadError').fadeIn(200).delay(3000).fadeOut('slow', function(){
    $(this).remove();
  });
}

Can you provide a sample output? What do you want the output to look like ideally? Just plugged it into jsfiddle and got This is an example of a subtitle Steve Johnson Michael Smith Technology This is an example of a subtitle John Williams Management Info Systems — itamar
– itamar, Commented Aug 5, 2013 at 14:06
Not sure how to set up XML to be parsed with ajax in jsfiddle. Here is what I have set up so far. But it doesn't run: jsfiddle.net/PYndD — Pegues
– Pegues, Commented Aug 5, 2013 at 15:01

Musa · Accepted Answer · 2013-08-05 15:57:24Z

2

Try

$(this).find('author').each(function(){
    var author = $(this).text();
    $('<a href="#"></a>').html(author).appendTo('#link_'+id+' div.itemauthor');
});

since you want to iterate the author tags regardless of the authors tag. Also use the current link div id to append it to only that one.

$(this).find('author').each(function(){
    var name = $(this).find('name').text();
    var link = $(this).find('link').text();
    $('<a href="'+link+'"></a>').html(name).appendTo('#link_'+id+' div.itemauthor');
});

edited Aug 5, 2013 at 15:57

answered Aug 5, 2013 at 14:15

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pegues Over a year ago

That worked like a charm with the #link_'+id+' Thanks so much! Do you know how I would go about adding a link to each one as well? Perhaps I would need to add in the XML something like < authlinks >< authlink >link1</ authlink >< authlink >link2</ authlink></ authlinks > ?

Musa Over a year ago

I would do <author><name></name><link></link></author> since its self contained.

Pegues Over a year ago

I created what you said with the following xml structure: code<authors><author><name>Name 1</name><link type="html"><![CDATA[name1.html]]></link></author><author><name>Name 2</name><link type="html"><![CDATA[nam32.html]]></link></author><author><name>Name 3</name><link type="html"><![CDATA[name3.html]]></link></author></authors> But there's an issue with only the last link being assigned to all of them. I'll post the new JS I have in the next comment.

Pegues Over a year ago

code $(this).find('name').each(function(){ var name = $(this).text(); $('<a href="#"></a>').html(name).appendTo('#link_'+id+' div.itemauthor'); }); $(this).find('link').each(function(){ var link = $(this).text(); $('#link_'+id+' div.itemauthor a').attr('href', link); });

Pegues Over a year ago

You've solved all my problems. You are amazing. Thank you very much!

EZLearner · Accepted Answer · 2013-08-05 14:15:30Z

-1

I think your problem lies in the code:

$('<a href="#"></a>').html(author).appendTo('div.itemauthor');

EDIT: Changed the code.

Try to change the code to:

$(xml).find('titleitem').each(function(){
    ...
    var $self = $(this);
    ...

    $(this).find('authors').each(function(){
        $('<a href="#"></a>').html(author).appendTo('div.itemauthor', $self);
    });

    ...
}

This will append the author only to context.

answered Aug 5, 2013 at 14:15

EZLearner

1,86417 silver badges29 bronze badges

1 Comment

Pegues Over a year ago

EDIT: I modified what you suggested so that it uses 'author', not 'authors', and it does now parse, but I get the same result. I also had to keep var author there, which you code no longer had. $(this).find('author').each(function(){ var author = $(this).text(); $('<a href="#"></a>').html(author).appendTo('div.itemauthor', $self); });

Collectives™ on Stack Overflow

How to I parse multiple items using jQuery and Ajax?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related