CODEWITHSUNDEEP
javascriptjqueryjsonloopsforeach
user3690260
user3690260

Reputation: 79

Json loop doesn't run

I have a JSON array and some JavaScript, but the loop doesn't execute.

I can't find the error.

HTML:

<div class="rosa" id="Mittelt">
  // place to append
</div>

JavaScript:

$(function() {
    var url = {"cats": [
        {"id":"1",
            "pictures":"http://www.w3schools.com/css/img_fjords.jpg",
            "picsmall":"http://www.w3schools.com/css/img_fjords.jpg"},
        {"id":"2",
            "pictures":"http://www.w3schools.com/css/img_lights.jpg",
            "picsmall":"http://www.w3schools.com/css/img_lights.jpg"}
        ]
    };
    var json=url["cats"];
    $(json).each(function(item) {
        console.log(json[0].id);
        item=json[0];
    $('<div class="lulu">' + 
        '<img src="http://www.w3schools.com/css/img_fjords.jpg" data-src="'+item.pictures+'.jpg"/>' +
        '<img class="lora" src="'+item.picsmall+'"/>'+'</div>')
        .appendTo('#Mittelt');
    })

CSS: 

.lulu {
    position:absolute;
    height:100%;
    -webkit-transform: translateZ(0px);
    -ms-transform: translateZ(0px);
    -o-transform: translateZ(0px);
    transform: translateZ(0px);
}

.lora {
    position:absolute;
    height:50%;
    -webkit-transform: translateZ(0px);
    -ms-transform: translateZ(0px);
    -o-transform: translateZ(0px);
    transform: translateZ(0px);
}

Here's a link: https://jsfiddle.net/5wyL5azj/2/

Upvotes: 1

Views: 91

Answers (3)

Sylvan D Ash
Sylvan D Ash

Reputation: 1117

The parameters passed into jQuery's each method are index followed by the item. In your code, item refers to the index and not the item itself. Change your each code to something similar to this:

var test = function() {
  var url = {"cats": [{"id": 1,"name":"one"},{"id":2,"name":"two"}]};
  var json = url["cats"];
  //json.forEach(function(item){ console.log(item); });  // Native JS for each loop
  $(json).each(function(){ console.log(this); }); // jQuery for each loop
};

Of course, the pure JS for each is usually faster than jQuery, but that shouldn't matter much in your current scenario

Upvotes: 0

TbWill4321
TbWill4321

Reputation: 8666

You don't need to manually set the item variable, it will be set to the next item in the array for you:

$(json).each(function(item) {
    console.log(item.id);
    $('<div class="lulu">' + 
        '<img src="http://www.w3schools.com/css/img_fjords.jpg" data-src="'+item.pictures+'.jpg"/>' +
        '<img class="lora" src="'+item.picsmall+'"/>'+'</div>'
    ).appendTo('#Mittelt');
});

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23632

 for(var i=0; i<json.length; i++){
    (function(i){
       $('<div class="lulu">' + 
          '<img src="http://www.w3schools.com/css/img_fjords.jpg" data-src="'+json[i].pictures+'.jpg"/>' +
          '<img class="lora" src="'+json[i].picsmall+'"/>'+'</div>')
          .appendTo('#Mittelt'); 
    })(i)
 }

item=json[0] will always point to the first element, and the loop won't work.

https://jsfiddle.net/5wyL5azj/4/

Upvotes: 5

Related Questions