Json loop doesn't run

Question

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/

You're overwriting item so it always points to the first element: item=json[0]; Remove that line. — Viktor
– Viktor, Commented Jun 20, 2016 at 15:00
Also change $(json).each(function(item){ to $(json).each(function(i, item){ — Viktor
– Viktor, Commented Jun 20, 2016 at 15:02
@Viktor You made my day :-), thanks. but now i tried with 3 ids, and it stops after the second. can you take a look please? jsfiddle.net/5wyL5azj/6 — user3690260
– user3690260, Commented Jun 20, 2016 at 15:08
That's only due to your CSS styles. If you inspect the rendered HTML with Developer Tools or similar, you can see that all three divs and their contents are there. — Viktor
– Viktor, Commented Jun 20, 2016 at 15:13

Thalaivar · Accepted Answer · 2016-06-20 15:03:25Z

5

 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/

answered Jun 20, 2016 at 15:03

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

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

1 Comment

user3690260 Over a year ago

@Thalavier hmm... i think i have wrote wrong the code. every id has 2 pictures. and i wourd set with the each loop, for every id a div, with the pictures.

TbWill4321 · Accepted Answer · 2016-06-20 15:06:43Z

0

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');
});

answered Jun 20, 2016 at 15:06

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

Comments

Sylvan D Ash · Accepted Answer · 2016-06-20 15:12:13Z

0

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

answered Jun 20, 2016 at 15:12

Sylvan D Ash

1,13714 silver badges24 bronze badges

1 Comment

user3690260 Over a year ago

hmm, can you change the code for me, because i have no idea. :-(

Collectives™ on Stack Overflow

Json loop doesn't run

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related