Hi all,
I’m trying to build the random quote generator and have trouble getting JSON object from the API. I’m using an extremely basic html and javascript just to see if the API is returning something and get nada when pressing button. Any ideas?
Link to CodePen: http://codepen.io/reeveress/pen/XNvPMY
Hey there! It looks like you haven’t added a script for jquery in the javascript settings so by default it won’t be recognized. Just a tip, use your console, it’s a really powerful tool for debugging. It was showing that “$” is not defined, a dead giveaway that the jquery syntax wasn’t being processed.
Also one more thing. You’ve also set up your click handler to register click events on the quote div, not the button.
Thanks! Console has proven to be awesome. I didn’t realize that it outputs error messages. I fixed the two issues but now I get a new one: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Google seems to tell me that it is a cross domain issue and for security reasons Chrome is blocking that request. Do you have any advice on what to use to go around this issue? CORS and jsonp are the terms I noticed being thrown around.
That happens when the API has external sources blocked or you’re not including an API key.
If you need a simple API I can publish mine.
There you go buddy https://mysterious-sierra-49778.herokuapp.com/api/
You can either get all the quotations (quotes, it’s just to avoid conflicts with a reserved word) with a GET request on https://mysterious-sierra-49778.herokuapp.com/api/quotations or get a single quotation with a GET request on https://mysterious-sierra-49778.herokuapp.com/api/quotations/ID where ID is a number between 1 and 10 (I’ve only created 10 quotes).
The forismatic APi responds to GET using JSONP (https://en.wikipedia.org/wiki/JSONP) This particular API wants the callback to be named jsonp. You should add &jsonp=? to your request url. format should also be set to jsonp.
Try this $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", function(json){...})
@Em-Ant It works! Thanks kindly.
@Oxyrus Awesome job on the API, Alan Watts was the man. How come yours works without JSONP?
You might also want to look into [CORS Anywhere] (https://github.com/Rob--W/cors-anywhere), a NodeJS proxy server that adds the required headers to requests. I spun up a version on heroku with my domain whitelisted for the production version of my projects, along with an embedded dev version for localhost.
I’m using a framework that provides JSON support out of the box 
Gotta say I had to look up every second word in your response but dang I learned a lot, thanks.