Using getJSON to access Flickr data

Question

I'm trying to access the JSON data for this user and write the id of the person using this code:

   <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript">
API_KEY = 'YOUR_API_KEY';

$.getJSON('https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=' + API_KEY + '&user_id=22694125@N02&format=json&jsoncallback=?', function(results){
      document.body.innerHTML = JSON.stringify(results.photos.photo[6].id);
  });</script>

</head>
<body>

</body>
</html>

For some reason, it doesn't return anything. Help?

@LeeTaylor I dont have anything else on the page, I just want to print the photo ID — user3205630, May 11 '14 at 01:24
what happens when you place the URL (with your API key) into a browser? — Lee Taylor, May 11 '14 at 01:27
@LeeTaylor I get this: jsonFlickrApi({"photos":{"page":1,"pages":6,"perpage":100,"total":"595","photo":[{"id":"14150748552","owner":"22694125@N02","secret":"cb6aa07961","server":"7357","farm":8,"title":"union station","ispublic":1,"isfriend":0,"isfamily":0},{"id":"14130209031","owner":"22694125@N02","secret":"ce21e5d60c","server":"7451","farm":8,"title":"ttc & cntower","ispublic":1,"isfriend":0,"isfamily":0},{"id":"14104453842","owner":"22694125@N02","secret":"51d7272c69","server":"7403","farm":8,"title":"scotiabank nuit blanche","ispublic":1,"isfriend":0,"isfamily":0},... — user3205630, May 11 '14 at 01:29
[Learn how to](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) [**debug** JavaScript](https://developers.google.com/chrome-developer-tools/docs/javascript-debugging). I think the request is fine, but you might not be accessing the response correctly. — Felix Kling, May 11 '14 at 01:29
As I just said. `results.photos.photo` is an **array**. It doesn't have an `id` property. The objects *inside* array have an `id` property. You either have to loop over `results.photos.photo`, or access the `i`th element. See the link above to learn how. — Felix Kling, May 11 '14 at 01:30
@FelixKling How do I access the id from the array? (sorry beginner at programming) — user3205630, May 11 '14 at 01:33
You first have to decide which of the objects in the array you want to access. The first one? The second one? All of them? E.g. to access the ID of the first object: `results.photos.photo[0].id`. Have a look at http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json to learn how to access nested objects and arrays. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Referring_to_Array_Elements might be helpful as well. — Felix Kling, May 11 '14 at 01:35
@FelixKling even when i enter results.photos.photo[0].id, i still don't get any text on the screen — user3205630, May 11 '14 at 01:36
Then the issue might be that the request is not even sent, I don't know. I already posted to links to resource about how to debug JavaScript. Add some `console.log` statements to find out which part of your code successfully executes. Set breakpoints, inspect variables, etc. We cannot debug your code for you, that's something you have to do on your own. — Felix Kling, May 11 '14 at 01:39

score 0 · Accepted Answer · answered May 11 '14 at 01:39

0

Based on what I've read I think you need to something like this:

$.ajax(
{
    url: "https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=[APIKEY]&user_id=22694125@N02&format=json&jsoncallback=?",
    type: "GET",
    cache: true,
    dataType: 'jsonp',
    success: function(data) 
    {
        console.log(data);
    }
});

I believe the calls have to be JSONP (not JSON).

answered May 11 '14 at 01:39

Lee Taylor

7,761
16
33
49

You are correct, but `$.getJSON` handles JSONP as well, if it detects `=?` in the URL. See https://api.jquery.com/jquery.getjson/#jsonp. So it's unlikely that this makes any difference. – Felix Kling May 11 '14 at 01:40
Ah, ok. Fair enough. I don't have a valid API key to test it out. – Lee Taylor May 11 '14 at 01:41
Me neither... but I tried it without a key and jQuery correctly replaced the `jsoncallback=?` part and the response looked good as well (of course it said that I don't have a valid API key). – Felix Kling May 11 '14 at 01:42
Yeah, I tried it in a fiddle with the same result! – Lee Taylor May 11 '14 at 01:42
The AJAX version doesn't work either, I'm not sure what I'm doing wrong considering my whole code is up there ^ – user3205630 May 11 '14 at 01:47
What does the console output with the code in my answer? – Lee Taylor May 11 '14 at 01:49
@LeeTaylor It's odd because it outputs nothing. – user3205630 May 11 '14 at 01:51
1

@user3205630: Is the request even sent at all? Check the network tab in the developer tools. Check the console for errors. – Felix Kling May 11 '14 at 01:52
@FelixKling The request isn't sent either, but I don't know how to fix that, I'm not sure what's going wrong :( – user3205630 May 11 '14 at 01:54
@user3205630: Since we can't look at your computer, we can't really tell you either. Make sure jQuery is loaded, you don't have any syntax errors, etc. But that would show up on the console anyway. – Felix Kling May 11 '14 at 01:55
@FelixKling The JQuery goes through, it says 304 Not Modified. There are no syntax errors because the console is empty. – user3205630 May 11 '14 at 01:58
@user3205630: All I can give you is this http://jsfiddle.net/kBxXk/, where you insert your API key and work your way from there. – Felix Kling May 11 '14 at 01:58
@FelixKling It works on jsfiddle.net but not on my computer...weird. – user3205630 May 11 '14 at 02:02
1

@user3205630: Oh god, I just saw it. You gave the script element a `src` attribute *and* put code inside of it. That doesn't work. You have to use two `script` elements. Please see this jQuery tutorial: http://learn.jquery.com/about-jquery/how-jquery-works/. – Felix Kling May 11 '14 at 02:20
Well spotted @FelixKling! – Lee Taylor May 11 '14 at 02:20
@FelixKling omg... I did not notice that. Thank you so much! – user3205630 May 11 '14 at 02:48

Using getJSON to access Flickr data

1 Answers1