I am trying to build the random quote machine, and built my own object of quotes to use stored here.
I looked at a simple JSON§ tutorial which used the following code:
$.getJSON("https://api.github.com/users/jeresig?callback=?", function(json){
console.log(json);
});
And that works fine. I get the object in the console.
But if I change the link to my object, the console is blank. Code that results in a blank console:
$.getJSON("https://raw.githubusercontent.com/themagicbean/bojackquotejson/master/bojackquotes.json?callback=?", function(json){
console.log(json);
});
Can anyone tell me what is going wrong?
Thanks!
Hello!
It’s because your JSON file has an invalid format. Use this tool to verify your JSON file :).
1 Like
To add to my previous answer:
You should always add the error handler to your AJAX calls, even if it’s just to log the error:
$.getJSON('url...')
.done(function(retrievedData) {
// The request succeeded and the data is valid JSON
}).fail(function(error) {
// Something wrong happened.
console.error('We could not fetch or parse the data:', error);
});
Be aware that this is not guaranteed to solve the problem. For instance, in your specific scenario, your JSON file had a bad format, but the error received on the fail
function didn’t say anything about the data being malformed. You’ll just have to test the data in those cases .
Anyway, I hope it helps !
Happy coding!
Thank you for the reply!
Edit: Just checked copying the data and found the extra comma.
Edit 2: Waited for Git raw to update, and still found a blank console: Codepen.
Edit 3: Removed the .json just in case that was the issue, it wasn’t. Raw data now here: https://raw.githubusercontent.com/themagicbean/bojackquotejson/master/bojackquotes
The current problem is that your JSONP definition is wrong, you should use the function name to be called instead of a ?
.
On the other hand, JSONP is insecure, so you shouldn’t be using it anyway .