Making a simple API call with jQuery getJSON

Question

I am trying to build a simple Random Quote Generator in Codepen as you can see here: http://codepen.io/scabbyjoe/pen/dXQmLw

Relevant code pasted below:

<html>
    <head>
    </head>
    <body>
        <h1>Random Quote Machine</h1>
        <div class="quote">
        </div>
        <div class="btn">New Quote</div>
    </body>
</html>

$(document).ready(function() {
    $(".btn").on("click", function(){
        $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
            $(".quote").html(JSON.stringify(json));
        });
    });
});

I am afraid I must be misunderstanding the getJSON tool as I cannot get any content to load up in my .quote div.

Can anyone explain why this isn't working?

I am try to follow from this (separate) example which is indeed working:

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function(){
      $.getJSON("/json/cats.json", function(json) {
        $(".message").html(JSON.stringify(json));
      });

    });

  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

See [`getJSON()` cross-domain errors](http://stackoverflow.com/questions/6849802/jquery-getjson-works-locally-but-not-cross-domain) for more info — Jonathan Lam, Aug 09 '16 at 03:35

Jacob · Accepted Answer · 2016-08-09T03:36:24.083

6

Check your console for errors:

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

You cannot make AJAX requests to a service hosted on a domain separate from your own unless they specifically allow it. This message indicates that it is not allowed.

Perhaps it's allowed in certain circumstances; check their documentation. If it's not, you'll have to proxy the request through your own server. There's no guarantee it's allowed in that situation either. You may have to provide them something like an API key or get added to a whitelist.

edited Aug 09 '16 at 03:36

answered Aug 09 '16 at 03:33

Jacob

77,566
24
149
228

Just beat me to it! – Jonathan Lam Aug 09 '16 at 03:34
Okay thanks Jacob, that makes sense as even this simple example copied almost exactly from the jQuery documentation does not work:http://codepen.io/scabbyjoe/pen/bZQrRg So in order to keep working on this I will need to test locally? – scabbyjoe Aug 09 '16 at 03:35
Yep, or try to proxy through your own local server, perhaps. – Jacob Aug 09 '16 at 03:37

score 2 · Answer 2 · answered Aug 09 '16 at 03:35

Your can discover the error message in console panel:

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

You should make sure the api.forismatic.com serve the resource with cross domain allowed.

Or you could take a look of jquery.ajax crossDomain option

Making a simple API call with jQuery getJSON

2 Answers2