Getting JSON to work - Build a Random Quote Machine

1

Can someone explain why my code isn’t working? My ultimate goal with this code is to get a JSON object from quotesondesign.com. I’m making use of JSONP but it doesn’t work. Can someone review my code and educate? I’d also take any resources on learning to use ajax.

The success and always case just have html functions so I can see if they run.

Code:

$('h2').on('click', function(e) {
    
    $.ajax({
    url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
 
    jsonp: "callback",
 
    dataType: "jsonp",
 
    success: function( response ) {
      console.log( response ); // server response
      $("#quoteContent").html("Byee");
    },
      
    always: function(response) {
      $("#quoteContent").html("Yoo");
    } 
    
});
});
3

Try getting rid of your jsonp option, and get rid of the _jsonp=mycallback in your URL.

4

That won’t work. That causes cross origin problems apparently.

5

It seems that despite what the documentation says on quotesondesign.com, we’re not actually going to be using JSONP. Do as suggested before, but also add a CORS proxy to make the request work. https://cors-anywhere.herokuapp.com is an easy choice. Prepend it to the URL like so: https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

6

Wow. This looks promising. Thanks for the help.

8

Ah, I didn’t realize that quotesondesign now uses HTTPS. Good call, that’s better than using a proxy for sure.

9

Huh. It words now. It seems that changing to http to https fixed it. Thanks all!