Random Quote Generator: Issues displaying from JSON

1

Hi all!

I know this question has been probably raised a million times. I’ve been working on the RQG but I can’t seem to get the API quote call right. You can find my project here: https://codepen.io/kaishinaw/pen/owadXb

I’ve been scouring the net for more than a day for a solution but haven’t been able to find a solution. It doesnt seem to be a problem with CORS as I have tried those suggestions.

Any help is greatly appreciated. Thanks!

2

http://api.jquery.com/jquery.getjson/

When there’s three arguments to $.getJSON the last argument is the callback function.

$(document).ready(function() {        // This will not work.
  $.getJSON(url, getQuote , "jsonp");
});

$(document).ready(function() {    //This will work.
  $.getJSON(url, "jsonp" , getQuote);
});
3

Hi Matthew,

Thanks for taking the time to look through my code. I’ve tried your suggestion but it is still turning up a blank but I do now have another question after you clarified the getJSON function. In the case where a callback function is used, what then is the use of the data that is sent to the server (second item)? Am wondering as wouldn’t the callback function already contain the requested data?

4

Check the console when you run the pen. It will say your on a secure site using https, requesting data from another site using http. Change the beginning of the url to https instead of http will solve that.

I’m not completely sure why this next part works, but use only two arguments in the $.getJSON request, the URL and the callback function.

I guess Jquery handles it in the headers, or having “&jsonp=?” in the URL.

5

Hi,
When I was doing this challenge I think I had the same problem as you.
If you open your web console in developer tools if you are using Firefox browser(dont open the codepen console) you will see this error:

Blocked loading mixed active content “http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=jQuery3210556791888390173_1500738053610&jsonp&_=1500738053611”[Learn More]

After looking on google for that error I found this

I changed to https instead of http and that solved my problem.

6

Hi both, thanks for your inputs. I realised that the problem was a combination of the https problem and my $.getJSON function. I previously tried the https solution while my getJSON function was wrong and tried the getJSON(url, getQoute) when my link was a http. The getJSON function only works when it is:

$.getJSON(url, getQuote)

Thanks again for your help! You saved me hours of frustration :slight_smile: