CODEWITHSUNDEEP
jqueryajaxjsonjsonpflickr
Martijn1981
Martijn1981

Reputation: 11

No results are returned when using Flickr JSON request

I'm still fairly new to AJAX and I'm experimenting with Twitter and Flickr. Twitter is working fine so far, but I've run into some issues with the Flickr API.

I'm getting no results back. The URL seems to be working fine and I'm pointing to the right object containing the array ('items'). Can anybody tell me what I'm doing wrong please? Thanks!

      $('#show_pictures').click(function(e){
    e.preventDefault();
    $.ajax({
      url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=home&nojsoncallback=1',
      dataType: 'jsonp',
      success: function(data) {
        $.each(data.items, function(i, item){
          $('<div></div>')
            .hide()
            .append('<h1>'+item.title+'</h1>')
            .append('<img src="'+item.media.m+'" >')
            .append('<p>'+item.description+'</p>')
            .appendTo('#results')
            .fadeIn();
        })
      },
      error: function(data) {
        alert('Something went wrong!');
      }
    });
  });

EDIT: I've changed the URL and I'm getting an error report back in FireFox: "Invalid label", regarding the "title" object in the root scope.

Upvotes: 0

Views: 276

Answers (4)

Martijn1981
Martijn1981

Reputation: 11

It seems the problem was in the URL. Apparently, jQuery always needs a callback parameter and it usually appends "callback=?". However, since Flickr is using "jsonpCallback" as the name for the parameter, I had to change the URL to this:

http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=home&jsoncallback=?

And presto, it suddenly works like a charm!

Upvotes: 1

Will Kru
Will Kru

Reputation: 5212

'Invalid label' refers to the label from the label-value pairs the interpreter expects. It can be solved like so

http://willcode4beer.com/tips.jsp?set=jsonInvalidLabel

Alternatively you can pass jsoncallback=? for the the returned json to be wrapped with those parenthesis.

Upvotes: 0

Simon Wuyts
Simon Wuyts

Reputation: 1

Does using dataType: 'json' instead of dataType: 'jsonp' make any difference?

Upvotes: 0

user67416
user67416

Reputation:

Try commenting this out:

$('<div></div>')
        .hide()
        .append('<h1>'+item.title+'</h1>')
        .append('<img src="'+item.media.m+'" >')
        .append('<p>'+item.description+'</p>')
        .appendTo('#results')
        .fadeIn();

And just do 

  console.log(data);

if you're using firebug (which you probably should be) or 

  alert(data);

That will tell you if your request is returning data. FYI, I ran curl on your url and it returns a bunch of json.

Upvotes: 0

Related Questions