The error message [jsonFlickrApi is not defined] in JavaScript is indicating that the

Question

The error message [jsonFlickrApi is not defined] in JavaScript is indicating that the

Upon calling a FLickrAPI, the returned xmlhttp.responseText appears as follows:

jsonFlickrApi({"photos":{"page":1, "pages":200, "perpage":100, "total":"19934",
 "photo":[{"id":"7315581986", "owner":"62691288@N00", "secret":"504915125a", 
"server":"7090", "farm":8, "title":"China, Tiananmen Square", "ispublic":1,
 "isfriend":0, "isfamily":0}, {"id":"7308693706",
...

An attempt to parse it is made in this manner:

var jsonResponse = xmlhttp.responseText ;
jsonResponse = eval("("+jsonResponse + ")");
var output += jsonResponse.photos.photo[1].id ;
alert(output);

The error message from Firebug reads: jsonFlickrApi is not defined

What could be causing this error message?
Why is 'eval' required in the initial step?

javascript json api flickr

Answer 1

Answer №1

Instead of receiving a standard JSON response, it looks like you are receiving a JSONP-response for your request. JSONP is essentially a JSON-object that is wrapped within a function call. All you need to do is define the function jsonFlickrApi, and it will automatically be invoked once the response becomes available:

function jsonFlickrApi (response) {
  console.log(
     "Received a response from Flickr-API containing these photos: %o", 
     response.photos
  );
  // Manage the response here. For example, update the DOM or trigger event handlers.
}

// In your XMLHttpRequest code:
var jsonResponse = xmlhttp.responseText ;
// This will execute the jsonFlickrApi-function.
eval("("+jsonResponse + ")");

Answer 2

Instead of receiving a standard JSON response, it looks like you are receiving a JSONP-response for your request. JSONP is essentially a JSON-object that is wrapped within a function call. All you need to do is define the function jsonFlickrApi, and it will automatically be invoked once the response becomes available:

function jsonFlickrApi (response) {
  console.log(
     "Received a response from Flickr-API containing these photos: %o", 
     response.photos
  );
  // Manage the response here. For example, update the DOM or trigger event handlers.
}

// In your XMLHttpRequest code:
var jsonResponse = xmlhttp.responseText ;
// This will execute the jsonFlickrApi-function.
eval("("+jsonResponse + ")");

The error message [jsonFlickrApi is not defined] in JavaScript is indicating that the

Answer №1

Similar questions

Exchange information among unrelated components

passing parameters via routes

Check the validity of the JSON input object using Jackson library

Error: The Tabs component is expecting a different `value`. The Tab with the current `value` ("0") is not present in the document structure

Is there a way for me to verify if my JSON field has been defined?

How to Implement a Limit in a MySQL LEFT JOIN for Every Record

Tips for loading images in advance while looping through an array for background images

Accessed a property that is not defined on the instance during rendering

Use vanilla JavaScript to send an AJAX request to a Django view

Can I display different text when blinking with Javascript?

Implementing specific CSS styles for different routes in Angular 5: Use Bootstrap CSS exclusively for admin routes

What is the best way to establish a client.js file for socket.io in Node.js?

Resizing tables dynamically using HTML and JavaScript

Update the text on the button

learn to extract json information from a php web service using nsserialization

I am experiencing an issue where the Axios configuration does not display the OnUploadProgress on my response

Slider Troubles - Strange glitch when reaching final slide

How can I iterate through items with jQuery at regular intervals?

What is the maximum storage capacity for variables on a NodeJS/ExpressJS server when handling multiple users?

Whenever I try to access my Node.js API from Heroku's live server, I encounter a CORS policy error