Error: jsonFlickrFeed has not been declared

Question

Error: jsonFlickrFeed has not been declared

My request is as follows:

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);
}

However, I am encountering the following error:

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

Can someone please point out what I am doing wrong and how I can fix it? Thanks in advance!

javascript ajax request flickr

Answer 1

Answer №1

Your linkflickrApiPoint seems to be missing some important details. Make sure it is set to

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

Here's a complete 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); // JSON data
            }
      });
    }
    catch (e) {
      console.log(e);
    }

Answer 2

Your linkflickrApiPoint seems to be missing some important details. Make sure it is set to

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

Here's a complete 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); // JSON data
            }
      });
    }
    catch (e) {
      console.log(e);
    }

Answer 3

Answer №2

When utilizing a jsonp ajax call, the flickr services responds with a call to the function: jsonFlickrFeed. In order to handle this, you have to define such a function in your code:

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

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

This function will be executed automatically upon completion of the ajax call. Therefore, instead of using the traditional success callback in your ajax request, you should 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>

Answer 4

When utilizing a jsonp ajax call, the flickr services responds with a call to the function: jsonFlickrFeed. In order to handle this, you have to define such a function in your code:

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

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

This function will be executed automatically upon completion of the ajax call. Therefore, instead of using the traditional success callback in your ajax request, you should 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>

Answer 5

Answer №3

Ensure you add the parameter nojsoncallback=1 in order to exclusively retrieve a JSON object.

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

Answer 6

Ensure you add the parameter nojsoncallback=1 in order to exclusively retrieve a JSON object.

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

Error: jsonFlickrFeed has not been declared

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve GPS data source details using Angular 2

Is there a way to enable access to the BTable properties beyond the table itself?

The alert message fails to appear during an Ajax request

Tips for using a button to update data without triggering a postback

Guide on inserting text input value into the href attribute of a hyperlink

Transferring an Array of Objects to a Vue.js Component

"Troubleshooting async/await issue with Node.js Sequelize and configuring the connection

Error when compiling TypeScript: The callback function provided in Array.map is not callable

Personalize the "set up notification" PWA on React

The issue with properly filtering a nested JSON object within an array in JavaScript

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

ZK: maintaining session connectivity

Managing data retrieval in React using the OpenWeather API

Firebase: Linking a child key from table to another table

Improving React Components with Material-UI Integration

Improving form handling with Vuex: Ensuring state is only updated after pressing the submit button

How to prevent jQuery from continually recalculating width on window resize?

Validating forms using Ajax in the Model-View-Controller

Tips for loading nested JSON data into an Angular Material dropdown list

Building conditionals in AngularJS expressions using if-then-else syntax