jQuery json format

Question

Why does this won't work?

var data = {"one": [
    {"slot1":true, "app":"facebook"},
    {"slot2":true, "app2": "facebook"}
]};

$(data.one).each(function() {
    if(this.slot1==true){
        $('#dropable').find('.1_1').append('<img src="img/apps/' + this.app1 + '.png" alt="' + this.app1 + '">');
    }
    if(this.slot2==true){
        $('#dropable').find('.1_2').append('<img src="img/apps/' + this.app2 + '.png" alt="' + this.app2 + '">');
    }
});

my #dropable:

<div id="dropable" class="drag"><div class="app 1_1"></div></div>
<div id="dropable" class="drag"><div class="app 1_2"></div></div>

What do you mean by "doesn't work"? What does it do, what doesn't it do, what should it do? — gen_Eric
– gen_Eric, Commented Feb 28, 2013 at 15:24
out comes: <img alt="undefined" src="img/apps/undefined.png"> but it should be display: <img alt="facebook" src="img/apps/facebook.png"> — Evolutio
– Evolutio, Commented Feb 28, 2013 at 15:25
this.app1 is undefined, but it should have still worked, it just would have given you the text "undefined" as alt text and the image name which should have been clearly visible with inspect element. — user400654
– user400654, Commented Feb 28, 2013 at 15:26

Alien Technology · Accepted Answer · 2013-02-28 15:26:36Z

2

You have two DIVs with the same ID. Try changing '#dropable' to '.drag'.

answered Feb 28, 2013 at 15:26

Alien Technology

1,9181 gold badge23 silver badges30 bronze badges

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

Comments

gen_Eric · Accepted Answer · 2013-02-28 15:36:03Z

1

There are multiple issues with this code.

First $().each is for DOM elements, not for your own arrays/objects. You want $.each. Second, this.app1 doesn't exist in your object, you have app and app2.

Lastly, and most importantly, you have 2 IDs of dropable. You can't do that. IDs are supposed to be unique. Use a class instead of an ID.

<div class="drag"><div class="app 1_1"></div></div>
<div class="drag"><div class="app 1_2"></div></div>

And then do it like this:

var data = {"one": [
    {"slot1":true, "app1":"facebook"},
    {"slot2":true, "app2":"facebook"}
]};

$.each(data.one,function() {
    if(this.slot1==true){
        $('.drag').find('.1_1').append('<img src="img/apps/' + this.app1 + '.png" alt="' + this.app1 + '">');
    }
    if(this.slot2==true){
        $('.drag').find('.1_2').append('<img src="img/apps/' + this.app2 + '.png" alt="' + this.app2 + '">');
    }
});

edited Feb 28, 2013 at 15:36

answered Feb 28, 2013 at 15:29

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

2 Comments

Evolutio Over a year ago

thx works perfectly. But I have one more question. Can I count maybe with a for loop the '.1_1' and '.1_2' ... ?

gen_Eric Over a year ago

@Evolutio: You can do $('.drag').find('.app').each( to loop over each of the .app elements.

Collectives™ on Stack Overflow

jQuery json format

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related