CODEWITHSUNDEEP
javascriptjqueryajaxjsoneach
Andy Kaufman
Andy Kaufman

Reputation: 781

Am I using the jQuery .each function incorrectly?

I am using some jQuery to retrieve and parse some JSON from a third party website, so I can use images from that site to populate a gallery.

Please see the details below, and reproduced in this JSFiddle:

 $(document).ready(function() {
   function populateImages(path) {
     $('.crush').each(function() {
       $(this).html('<img src="' + path + '/>');
     });
   }
   $.ajax({
     url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
     dataType: "jsonp",
     type: "get",
     success: function(data) {
       var regex = /"/g;
       var i = 0;
       for (i = 0; i < 20; i++) {
         var content = data.posts[i].content_display;
         var part1 = content.split('src="');
         var part2 = part1[1].split(regex);
         var imgPath = part2[0];
         console.log(imgPath);
         populateImages(imgPath);

       }
     }
   });

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Result:</h1>

<div id="result">
  <div class="pure-g">
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
    <div class="crush"></div>
  </div>
</div>

I know the part that's retrieving the JSON query is working because it is outputting the image path I want to grab in the console. However, the last part is using the jQuery .each function to add an tag and fill it with the path I have retrieved with the AJAX, but it's not working.

Not sure what I am doing wrong.

Please note that although the second part is in its own function called populateImages, I have tried embedding that code in the loop part, and still had the same effect.

Greatly appreciated if anyone can help.

Upvotes: 0

Views: 76

Answers (3)

Guffa
Guffa

Reputation: 700322

You shouldn't use each for that, it only means that you will put an image in every element for the first URL, then replace all of them with an image for the second URL and so on. You can make the populateImages function take a index where you want to place the image. Use the eq method to get a specific element:

function populateImages(index, path) {
  $('.crush').eq(index).html('<img src="' + path + '"/>');
}

Call the function with the loop counter as index:

populateImages(i, imgPath);

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28437

You can easily narrow down your selection with jQuery's eq().

http://jsfiddle.net/BramVanroy/rzg64bvh/6/

 $(document).ready(function () {
     $.ajax({
         url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
         dataType: "jsonp",
         type: "get",
         success: function (data) {
             var regex = /"/g;
             var i = 0;
             for (i = 0; i < 20; i++) {
                 var content = data.posts[i].content_display;
                 var part1 = content.split('src="');
                 var part2 = part1[1].split(regex);
                 var imgPath = part2[0];
                 console.log(imgPath);
                 $('.crush').eq(i).html('<img src="' + imgPath + '">');
             }
         }
     });
 });

Upvotes: 1

blex
blex

Reputation: 25634

Everytime the loop does an iteration, you are populating every .crush with the same image. This should work:

 $(document).ready(function(){
     var crushes = $('.crush');

     $.ajax({
         url:'http://tubecrush.net/wp_api/v1/posts?callback=show',
         dataType:"jsonp",
         type:"get",
         success:function(data){
             var regex = /"/g;
             var i = 0, l = crushes.length;
             for(i=0;i<l;i++) {
                 var content = data.posts[i].content_display;
                 var part1 = content.split('src="');
                 var part2 = part1[1].split(regex);
                 var imgPath = part2[0];
                 console.log(imgPath);
                 crushes.eq(i).html('<img src="' + imgPath + '"/>');
             } 
         }
     });
 });

Upvotes: 1

Related Questions