Random Quote Machine- help with jsonp

#1

I’m working on the random quote machine project, and I’m using this API to get a random quote: http://quotesondesign.com/api-v4-0/

However, I’m running into an issue with cross-origin http requests. I understand that in order to make the request, I have to use jsonp. The documentation for the api says to use the parameter jsonp=, and i set that equal to my callback successCallback. However, it’s giving me this error:

Random%20Quote%20Machine.html:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse ()
at successCallback (random_quote_machine.js:10)
at posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=successCallback&callback=jQuery111100662…:1

Here’s my Javascript code:

var newQuote = function() {
  $.ajax({
    url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=successCallback",
    dataType: 'jsonp',
  });
};

var successCallback = function(result) {
  var responseJSON = result[0];
  var json = JSON.parse(responseJSON);
  $("#author-text").html(responseJSON.title);
  $("#quote-text").html(responseJSON.content);
};




$(document).ready(function() {
  $("#new-quote-button").click(newQuote);
});
#2

I think you are getting confused. The issue I am seeing isn’t with cross-origin but with “mixed content” - in other words you are calling an http resource from an https site.

When I’m debugging, I like to simplify. This works fine:

var newQuote = function() {
  $.ajax({
    url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=successCallback",
    dataType: 'jsonp',
  });
};

var successCallback = function(result) {
  console.log(result[0]);
  // var responseJSON = result[0];
  // var json = JSON.parse(responseJSON);
  // $("#author-text").html(responseJSON.title);
  // $("#quote-text").html(responseJSON.content);
};

$(document).ready(function() {
  // $("#new-quote-button").click(newQuote);
  newQuote();
});

The big change I made was to switch to https in your url.

1 Like
#3