Could anyone help me with trying this API?

JavaScript
1

I am working on the random quote generator project and am so close to getting the random quote thing done. I have everything else done and have tried a different API within the same code but for some reason when I use this specific API, it just doesn’t work. I will load this API just like normally into a website and receive the expected output. Why does this code not work?

$(document).ready(function() {
     $("#new").click(function() {
      $("body").css("background-color", changeColor());
      $("#bigContainer").css("background-color", randie);
      $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {

         $("#qbox").html(JSON.stringify(json));

        });
      });

    });
2

Working with APIs is tough at first. I made this pen to show different ways to get quotes.

3

You my friend, are extremely helpful. By adding one line of your code and by doing a little research on caching, I can now understand why it did not work. Thank you so much for your advice!

4

Though if I could ask you one question pertaining as to why it did not work originally. I did not have the line of code $.ajaxSetup({ cache: false });. Adding this line fixed everything. My question is, why did it not generate anything before with the new API? Why was it that it was not requesting anything with the new API. With the old one, it was generating just fine. I can understand it making the API call then getting the request and just displaying that each time because it cached it. And if it cached it, it should show output, but for some reason didn’t. If there are any more helpful sources that you could recommend me on the subject of APIs and programming in general, please keep me informed.

5

Yeah, that sounds odd. It should have returned the previous, cached result.

When I reduce your original code:

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

that’s what I get.

Could it be that you were seeing no change on the page so you were assuming nothing was happening?

6

Yes, since the element I had targeted to display the data in was not changing whatsoever with the new API, I assumed nothing was happening. Is there a way to where I can check on if anything is occurring without relying on inserting that data into an HTML element? I would assume that the browser has its own console built into it. Is there a way I may check it via that?

7

The simplest way to monitor what is happening is with console.log statements, that will show up in the browser console. This is a fundamental tool for working with javascript. For example, if I was having a problem with the above code, I would go:

console.log('page loaded...')
$(document).ready(function() {
  console.log('document ready... about to call API')
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
    console.log('API returned')
    console.log('json', json)
  });
});

Then I would open up the browser console - usually something like ctrl-shft-i - and see the output to figure out what was happening.