Not Able To Get Values From The Api Using Jquery

I am unable to fetch the values from a Random quote API. I don't where this issue is happening. Is it while fetching the content or while returning it to the front end. Could have

Solution 1:

Seems that there is something wrong with your server's "Access-Control-Allow-Origin".

sorry for the misleading, it seems that the http://null is caused by stackoverflow's Run code snippet.

Imadeaworkingcopy (no code change besides change the `http` to `https`):

https://jsfiddle.net/qex5y16v/1/

Solution 2:

Since you are making a cross-origin request you need to use the second example. Just add &_jsonp=? to the API URL. If your webpage is hosted on https (like stacksnippets) then API URL must also be https.

$(document).ready(function() {
  $("#click").on("click", function() {
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(data) {
      console.log(data);
    });
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><buttontype="button"id="click"class="button-shape">Button</button>

I still don't understand what the callback param does.

You are requesting JSON data from an API that (apparently) does not allow cross origin requests. But they have provided a work around: if you add _jsonp=myfunc then the server returns JSONP instead of JSON, which is essentially JavaScript code that wraps JSON data. jQuery.ajax explains the details.