Why doesn't my loop work when displaying data using jQuery but does in browser console?

Question

Issue Before:

When I run the loop using a console.log to display the data, it works. I get different headlines and it's corresponding snippets below. However when I include jQuery the headlines are repeated and the snippets do not display.

Updated Issue (includes thumbnail image and url links):

I am using the NY TIMES API and I am trying to write a loop that will list article;

Headlines
Snippets
Thumbnail Image
NY TIMES Url's that they are linked to

I tried different variations of the loops written for the article Headlines and their Snippets to get article Thumbnail Images and NY TIMES Url's but I am not getting any luck, there are also no errors being thrown in the console.

Here is a JSFiddle including the JSON API data:

https://jsfiddle.net/m15xg45j/

Below is my JS for this.

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";

url += '?' + $.param({
    'api-key' : "67dac4e994164fca920f7a8420e28dc2",
    'q' : "health"
});

$.ajax({
    url: url,
    method: 'GET',
}).done(function(result){

    var articles = result.response.docs;

    for(var i=0; i<articles.length; i++){
      $("h2").each(function(index, el){
        $(el).html(articles[index].headline.main);
      });

      $("figcaption").each(function(index, el){
        $(el).html(articles[index].snippet);
      });

      $("img").each(function(index, el){
        $(el).html(articles[index].multimedia.url);
      });

      $("a").each(function(index, el){
        $("href").attr(articles[index].web_url)
      });
    }
}).fail(function(err){
    throw err;
});

and here is the HTML

<div>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg02.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg03.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg04.jpg" alt="">
      <figcaption>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg05.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg06.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg07.jpg" alt="">
       <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua
      </figcaption>
    </figure>
  </a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg">
    <h2>Headline</h2>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg08.jpg" alt="">
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </figcaption>
    </figure>
  </a>
</div>

$("h2").html(articles[i].headline.main); will replace the contents of all currently existing h2 elements with the contents of articles[i].headline.main. Same for the next line with the figcaption. If those elements don't exist yet, you won't get any output. I think you want to append the data to something, or create new elements, instead. — ADyson
– ADyson, Commented Feb 27, 2017 at 13:23

Jono Stewart · Accepted Answer · 2017-02-27 13:22:59Z

2

The problem lies in the line:

$("h2").html(articles[i].headline.main);

Each time you loop through the for loop, that line sets the html of ALL H2 elements. So on the last iteration, all H2 elements have their html set to the last article.

You may want to consider:

var parent = $('.headline-collection');

for(var i=0; i<articles.length; i++) {
    var headline = $('<h2>' + articles[i].headline.main + '</h2>');
    parent.append(headline);
}

The html template inside that 'var headline...' line could be your entire article, and should probably be split into another 'factory' style method.

answered Feb 27, 2017 at 13:22

Jono Stewart

3651 gold badge3 silver badges11 bronze badges

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

Comments

dmoo · Accepted Answer · 2017-02-27 13:32:48Z

1

As mentioned by @user3112619, you are overwriting the values every time. If you don't want to go the template method (you should consider it) - this will fix it for now -

var articles = result.response.docs;
$( "h2" ).each( function( index, el ) {
    $( el ).html(articles[index].headline.main);
});
$( "figcaption" ).each( function( index, el ) {
    $( el ).html(articles[index].snippet);
});

answered Feb 27, 2017 at 13:32

dmoo

1,52913 silver badges17 bronze badges

1 Comment

skrippyfingaz Over a year ago

Thanks for this answer, I'm going to be posting another question regarding the corresponding thumbnail images and a CTA button.

Abhi.P · Accepted Answer · 2017-02-27 13:22:51Z

0

I am not aware of the response of your get method. But can we try with $("someSelector").append("Sample Response"); ?

answered Feb 27, 2017 at 13:22

Abhi.P

1301 silver badge9 bronze badges

Collectives™ on Stack Overflow

Why doesn't my loop work when displaying data using jQuery but does in browser console?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related