How to use $.ajax to receive JSON from API

Question

I'm trying to make a random quote machine, so I started out with this HTML to define the elements:

<div id="quoteDisplay">
  <h1 id="quote">Quote</h1>
  <h2 id="author">- Author</h2>
  <button id="new">New Quote</button>
</div>

$('#new').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
    success: function(data) {
      var post = data.shift();
      $('#author').html(post.title);
      $('#quote').html(post.content);
    }
  })
});

However for some reason when I click on the button, nothing happens and I don't understand where the problem is. I'm fully open to other methods of doing this.

Nothing happens because the request returns an empty object: http://jsfiddle.net/1chjtL6h/ — Rory McCrossan, Jul 05 '17 at 10:03
Is that the actual URL you use? If so, it doesn't look right. — evolutionxbox, Jul 05 '17 at 10:03
Possible duplicate of [How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Jul 05 '17 at 10:04
@RoryMcCrossan It actually works if you change the URL to `https` rather than `http` https://jsfiddle.net/94h6sx74/ in JSF I mean — Bad Hombre, Jul 05 '17 at 10:07
I tried with exactly same code what you shared, and your ajax call is working fine. Not sure what else you are looking for. http://jsfiddle.net/1chjtL6h/1/ — anujayk, Jul 05 '17 at 10:08
@Hipady well spotted. I'm 50/50 whether to suggest adding that as an answer, or closing the question as a typo — Rory McCrossan, Jul 05 '17 at 10:09
why are you using var post = data.shift(); as whole response is single array with single data, if you shift there wouldn't be any data from the response. — Vinod kumar G, Jul 05 '17 at 10:10

score 1 · Answer 1 · answered Jul 05 '17 at 10:10

The reason that the request isn't returning on jsFiddles, is due to the fact that the url entered results in a 'Mixed Content' error. (I.e., requesting a 'HTTP' source on a 'HTTPS' page.)

I think the reason that your code isn't working, is due to the fact that you haven't assigned the 'Document Ready' syntax to your jQuery file (If that is the full code for your JS file). As your code works as can be seen here.

This can be achieved through the shorthand syntax of

$(function() {
//YOUR CODE HERE
}

Or

$(document).ready(function(){
});

score 0 · Answer 2 · answered Jul 05 '17 at 10:10

You're using $.ajax and one of the options of this method, is the method, which isn't specified.

To understand more about request methods, look at the jQuery docs: http://api.jquery.com/jquery.ajax/

The following code will work.

$.get({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
    success: function(data) {
        /* process response */
    }
})

There is a working example here: http://jsfiddle.net/1chjtL6h/2/

How to use $.ajax to receive JSON from API

2 Answers2