getJSON seems to not be calling (with bonus d-flex question)

[timothypslattery]

Hey guys! I can’t seem to call getJSON correctly…any help is appreciated!

I am trying to work with this API:

Quotes and expressions. The most inspiring expressions of mankind.

relevant bit of javaScript:

var apiReq = "https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=JSON&lang=en";
  
  $.getJSON(apiReq, function(json) {
        $("#test").html(json);
        });

I am pretty sure the API is returning correctly because when I copy/paste the URL into a browser, it returns data as expected.

here is a link to my codepen:

random_quote_generator

I am expecting the

aaaa

to change to the raw json output
(you can see I moved it outside the click function for testing)

[bonus q]: trying to get the radios to line up right next to the new quote button (right now the radios seem to be center justified)…any thoughts??

Thanks!!

–t

[aungureanu614]

Try this for your request:

form = new FormData()
form.append('method','getQuote')
form.append('format','json') 
form.append('lang','en')

fetch('https://api.forismatic.com/api/1.0/', {
          method: 'POST',
		  body: form
        }).then((response) => response.json())
          .then((data) => {console.log(data)})

The way I figured this out was by going here: https://api.forismatic.com/api/tester/ and making a request. Then I took a look at the network tab in chrome dev tools and noticed that the endpoint is expecting form data and that the method is actually POST not GET. By the way there also seems to be a CORS issue which means that you can’t makes requests for resources to a different domain than the one you are currently on (for security reasons). You can get around this by installing the Allow-Control-Allow-Origin chrome extension. Note you will need to refresh your page when you toggle the chrome extension on or off in order for it to take effect. There are other ways of getting around CORS issues but this has been the simplest way I’ve found. Good luck with your project!

file:///Users/aungureanu/Desktop/Screen%20Shot%202017-11-03%20at%209.46.55%20PM.png

[IsaacAbrahamson]

@timothypslattery, @aungureanu614

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

[IsaacAbrahamson]

@aungureanu614

You can get around this by installing the Allow-Control-Allow-Origin chrome extension. Note you will need to refresh your page when you toggle the chrome extension on or off in order for it to take effect. There are other ways of getting around CORS issues but this has been the simplest way I’ve found.

This may be the simplest way for you, but the problem is that everyone else who views your project that doesn’t have that installed will think it’s broken. This would not be a good solution if you plan on putting this project on a portfolio or such.

[timothypslattery]

Thank you for the replies everyone!! I will update when I get this fully implemented, have changed gears to the weather app (might have a question there too, but hopefully it was answered here already =) )

Thanks again!
–t

[timothypslattery]

OK thanks, will remember for the future.

[timothypslattery]

Hey guys! Just wanted to check in and show you guys my final product.
Aungu, I did end up getting the api call to work after installing the chrome plugin, but I wasn’t quite satisfied with that, since I wanted to share this and have it for a portfolio.

After looking around I found another camper that successfully used this api without the Allow-Control-Allow-Origin workaround (looks like all he/she did was invoke the full ajax function and use JSONP datatype).

Is fetch() the preferred method for XHR calls? I’m sure the coding world moves fast, maybe FCC lessons need to be updated, or are specific situations for using $.ajax vs. fetch()?

Thanks again for your help!!

This is the ajax call I ended up using–

function apiCall(aurl) {
  $.ajax({
    dataType: "jsonp",
    cache: true,
    url: aurl,
    success: function(data) {
      $("#quote-text").html(data["quoteText"]);

      if (data["quoteAuthor"] == "") {
        if (data["quoteLink"].slice(22, 24) == "ru") {
          $("#quote-author").html("неизвестный");
        } else {
          $("#quote-author").html("Unknown");
        }
      } else {
        $("#quote-author").html(data["quoteAuthor"]);
      }
      tweetUrl =
        twitterUrl +
        "text=%22" +
        data["quoteText"] +
        "%22%0D%09--" +
        data["quoteAuthor"] +
        "%0D&hashtags=freecodecamp,randomquotes,forismatic";
      tweetUrl = tweetUrl.replace(/ /g, "%20");

      $("#share-tw").attr("href", tweetUrl);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      console.log(XMLHttpRequest["status"]);
    }
  });
}

random_quote_generator