Javascript Json Jquery Basics

Question

today, i learned the basics of Json and its parsing through Jquery. I know my question is futile but i am stuck and unable to get a way out.

the following code doesn't work....but i guess i did everything ok

<html>
<head>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>
$(document).ready(function(){

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=2d34860785184c2e3458de2bc437ecfc&tags=rose&format=json&nojsoncallback=1&api_sig=b7303e1d0d8a9fbb1159404ca7927e98",function(data){
var output="<ul>";
for (var i in data.photos) {
    output+="<li>" + data.photos.photo[i].id+"</li>";


    if (i === 3){
    return false;
}
}
output+="</ul>";

document.getElementById("placeholder").innerHTML=output;
})
})
</script>
</head>

<body>


</body>

</html>

Why is your placeholder div inside the <head> of the document instead of the <body>? — Dan Pichelman
– Dan Pichelman, Commented Aug 3, 2013 at 13:02
If you used indentation it'd be incredibly much easier to figure out everything. — h2ooooooo
– h2ooooooo, Commented Aug 3, 2013 at 13:04
if you use jquery,use the $("#id") selector..not getElementById — HIRA THAKUR
– HIRA THAKUR, Commented Aug 3, 2013 at 13:04

iConnor · Accepted Answer · 2013-08-03 13:20:10Z

2

You have your indexes wrong in the JSON you need to make the following changes.

Demo: http://jsfiddle.net/ALJkV/

$(document).ready(function () {

    $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=2d34860785184c2e3458de2bc437ecfc&tags=rose&format=json&nojsoncallback=1&api_sig=b7303e1d0d8a9fbb1159404ca7927e98", function (data) {
        var output = "<ul>";
        for (var i in data.photos.photo) { // The photo index is what you need;

            // If you want to skip 3
            if (i == 3) continue;
            // Or if you want to stop at 3 
            if(i == 3) break;

            output += "<li>" + data.photos.photo[i].id + "</li>";
        }
        output += "</ul>";

        document.getElementById("placeholder").innerHTML = output;
    });
});

Continue: https://developer.mozilla.org/en...

edited Aug 3, 2013 at 13:20

answered Aug 3, 2013 at 13:05

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

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

17 Comments

MightyPork Over a year ago

why the hell continue?

JJJ Over a year ago

continue does absolutely nothing here. I assume the OP wants to limit the loop to max 4 photos.

MightyPork Over a year ago

the way you did it, you will not skip anything. Either remove the continue or replace it with break.

nnnnnn Over a year ago

@MightyPork - regarding your suggestion about using i.id, no, that would not work. i is the index/key not the associated value, so that would give an error.

nnnnnn Over a year ago

On the return false; idea, that won't just exit the loop, it'll exit the entire function before it has actually put them in the placeholder element. Use break; to exit the loop without exiting the function.

|

Collectives™ on Stack Overflow

Javascript Json Jquery Basics

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related