Help requested for Random Quote Generator [Solved]

Code Feedback
1

I can’t seem to get my API call right. I am trying to make an API call to return an html page and store it in a variable. I have verified that once I get html into the ‘data’ varia

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.forismatic.com/api/1.0/?method=getQuote&format=html&lang=en. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

2

I’m not sure how that got sent before I completed it, but…

I have verified that once I get html into the ‘data’ variable that it then displays properly. Unfortunately, I keep getting the error below when I click the button. Can someone tell me what I am doing wrong? Or give me a different quote site with API calls that work with CodePen?

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.forismatic.com/api/1.0/?method=getQuote&format=html&lang=en. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I have spent about 4 hours on this and I am sure that the answer is simple, but it is eluding me.

My CodePen URL is:

 http://codepen.io/mshapiro/full/zBJVJL?editors=1111
3

I keep replying to my own posts, but I want to make sure that anyone who answers me has the most current data.

I read elsewhere on the site about using “https://crossorigin.me” at the beginning of the URL and that did get me a response that displayed correctly. Unfortunately, like the poster where I found that, I get the same quote repeatedly. It seems that it is getting cached somewhere and that cached data is getting returned. The poster said something about adding “cache:false” to the command, but I’m not sure where to do that.

Any ideas?

4

Gimme a second to look at the previous post.

One tip for the forum, when you have additional details to add and you’re the only one posting so far, it is better to just edit the original post.

I scan through all the ‘help wanted’ posts, and when I see multiple replies, I usually skip it as I assume a robust discussion is taking place, not just a guy talking to himself :smile: I only caught this one because I was avoiding some other obligations so read the forum a little more closely :wink:

5

Ok, so you are referring to this post:

What code have you got so far, do you have a Codepen link for it? Have you used a $ajax request or a $getJSON one?

6

From the jQuery documentation for $.getJSON:
http://api.jquery.com/jquery.getjson/

#JSONP

If the URL includes the string “callback=?” (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

I had to use jsonp to get data from wikipedia api, so it may be required for the forismatic one too.
Try something like this:
http://api.forismatic.com/api/1.0/?method=getQuote&format=html&lang=en&callback=?

This should take care of the CORS error!

7

Is there a specific reason why you are using a CORS proxy? Making the api call on http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=? using jquery getJSON will give you a nice json file that you can get the data from.

1 Like
8

OK. It’s closer to working now. If I use the following code:

 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
   $("#quoteText").html(JSON.stringify(json);
 });

then it displays the returned JSON and it changes with each button press.

If, however, I try to loop through the returned JSON as shown in “Convert JSON Data to HTML” with this code:

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {
    var html = "";
    // Only change code below this line.
    json.forEach(function(val) {
      var keys = Object.keys(val);
      html += "<div>";
      keys.forEach(function(key) {
        html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
      });
      html += "</div><br>";
    });        // Only change code above this line.
     
    $("#quoteText").html(html);
  });

then it halts with the error:

 TypeError: json.forEach is not a function

and does not update the div with anything.

What am I doing wrong now? Is there some other library that I should add?

9

An example JSON object you are getting with that request looks like this:

{"quoteText":"Try and fail, but don\'t fail to try.", 
"quoteAuthor":"Stephen Kaggwa", 
"senderName":"", 
"senderLink":"", 
"quoteLink":"http://forismatic.com/en/cdce03b323/"}

The error you have is telling you that json.forEach is not a function, which is true. The forEach() method applies to arrays, not single javascript objects. If you want to access things from the object, review what you learned about dot notation and bracket notation for navigating objects.

10

Thank you, Jackson.

I copied the code from “Convert JSON Data to HTML” and I was thinking that it was cycling through key/value pairs in the returned object, not multiple objects in an array. That solved the problem, now I can go on to making it look nice.

2 Likes
11

Just wanted to say I’ve spent all week trying to figure out API’s and JSON and while all the other reading and codeacademy courses I’m sure helped, THIS thread is what broke it open for me. Thank you for asking the question and posting your code! Cheers.
-Dusty

1 Like