CODEWITHSUNDEEP
javascriptajaxrequestflickr
Yordan Kanchelov
Yordan Kanchelov

Reputation: 581

Uncaught ReferenceError: jsonFlickrFeed is not defined

I have the following request : 

const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne";

try {

  $.ajax({
    url: flickrApiPoint,
    dataType: 'jsonp',
    data: { "format": "json" },
    success: function (data) {
      console.log(data); //formatted JSON data
    }
  });
}
catch (e) {
  console.log(e);
}

but in the end I am getting 

Uncaught ReferenceError: jsonFlickrFeed is not defined
    at photos_public.gne?&callback=jQuery331016421245174669186_1523107884637&format=json&_=1523107884638:1

What I am not doing right and how can I fix it? Thanks in advance!

Upvotes: 1

Views: 1273

Answers (3)

Syed Shahjahan
Syed Shahjahan

Reputation: 119

Use the parameter nojsoncallback=1 to get only JSON object.

const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne?nojsoncallback=1";

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

Because you are using a jsonp ajax call, the flickr services returns a call to the function: jsonFlickrFeed That means you must define by yourself in your code such a function like:

function jsonFlickrFeed(json) {
    console.log(json);

    $.each(json.items, function (i, item) {
        $("<img />").attr("src", item.media.m).appendTo("#images");
    });
}

Such a function is executed automatically on ajax done. Hence, instead of the success ajax callback you need to define a jsonFlickrFeed function callback.

function jsonFlickrFeed(json) {
    //console.log(json);
    console.log('jsonFlickrFeed called');

    $.each(json.items, function (i, item) {
        $("<img />").attr("src", item.media.m).appendTo("#images");
    });
}
const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne";

try {

    $.ajax({
        url: flickrApiPoint,
        dataType: 'jsonp',
        data: { "format": "json" },
        complete: function (data) {
            console.log('ajax call completed'); //formatted JSON data
        }
    });
}
catch (e) {
    console.log(e);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="images"></div>

Upvotes: 2

Robert
Robert

Reputation: 10400

Your URLflickrApiPoint is incomplete. It has to be const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

Full example:

const flickrApiPoint = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

    try {

          $.ajax({
            url: flickrApiPoint,
            dataType: 'jsonp',
            data: {format: "json"},
            success: function (data) {
              console.log(data); //formatted JSON data
            }
      });
    }
    catch (e) {
      console.log(e);
    }

Upvotes: 2

Related Questions