I’ve finally managed to get my quote machine working, but I’m wondering how I can get it to access all objects in the JSON, as against having to define how many to look at manually.
Here is my code. The bit I’m looking at is [posts_per_page]=20. I would have thought setting this to => 0 would have done the trick, but it simply displays the 0th object. The machine works fine, but surely there’s a way to tell it to simply look at all objects, as against telling it there are 20 to look at? Hope that makes sense!
$(document).ready(function() {
// When Button Is Clicked
$("#generate").on("click", function(){
// Get Quote From API
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=20&callback=", function(data) {
// Randomize Get Request
var post = data[Math.floor(Math.random()*data.length)];
// Replace Quote Placeholder With JSON Object
$("#theQuote").hide().html(post.content).fadeIn('slow');
The way you have your code set up, the AJAX call is made every time the button #generate is clicked. You’re downloading X amount of random quotes each time and then choosing randomly among them. If you set [posts_per_page] to 1, you’d get a randomly selected quote with each button press, and you wouldn’t have to go through to trouble of generating a random number to pick it. Also, the more quotes you download at once, the more the server has to work per call. It may not seem like much when it’s just you, but if you’ve got 100 people each trying to get 100 quotes at the same time, it could be harder for the server (and kinda wasteful when they’re probably not going to look at all 100 quotes before closing the page). I think you’re far closer to being done than you realize!
Thanks for the help! I can certainly see now why this is inefficient. I had set [posts_per_page] to 1 initially, but this only shows the 1st quote, so the post variable is just picking randomly from a selection of 1, which I’m struggling to get around!
After reading the documentation better, I see what you mean. I can even type http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback= into chrome and it will give me a random quote, but when I implement it, it still only shows the same quote every time the button is pressed.
$(document).ready(function() {
// When Button Is Clicked
$("#generate").on("click", function(){
// Get Quote From API
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data) {
// Replace Quote Placeholder With JSON Object
$("#theQuote").hide().html(data[0].content).fadeIn('slow');
Your browser is cashing that one result and not calling the api every time. I had that same problem. The solution is to add a time stamp to the api call. So, use this as the api adress: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + new Date().getTime()
That way, the address is always unique and the browser calls it every time you go through.
This worked! Is there any detrimental effect on load times by having to fetch the time? I haven’t got my head around $.ajax() yet, I think I’m going to re-build the machine using this when I’ve finished my current version so I can learn both methods.
I’ve been building the projects on localhost to get more experience with it, but I quickly put it in a pen, sorry if some bits are a tad messy.
Yeah, I considered disabling cashing, but this seemed a better way around it.