Random Quote Machine - Can't access JSON key/values

1

I’m working on the Random Quote Machine project and trying to get random quotes from this API - http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback.

API documentation at https://quotesondesign.com/api-v4-0/

Error message from the console: Uncaught ReferenceError: mycallback is not defined. I’m wondering what’s the reason for the problem. Any suggestions to get around it? Any help appreciated, thanks!

$(document).ready(function(){
	function getNewQuote(){
		$.ajax({
			method: 'GET',
			url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback',
			jsonp: 'jsonp',
			dataType: 'jsonp'
		}).done(function(data){
			console.log(data);
		});
}
	getNewQuote();
});
2

add jsonpCallback: 'mycallback'

also you don’t need to specify jsonp: 'jsonp'

3

Why explicitly use jsonp btw? Regular old json seems to work:

$(document).ready(function(){
	function getNewQuote(){
		$.ajax({
			method: 'GET',
			url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
            dataType: 'json',
    	}).done(function(data){
    		console.log(data[0]);
    	});
}
	getNewQuote();
});

this logs out:

Object {
  content: "<p>My eyes hurt, but my hand keeps sketching.</p>
",
  ID: 1755,
  link: "https://quotesondesign.com/pablo-del-valle/",
  title: "Pablo del Valle"
}

From jQuery .ajax() documentation:

“json”: Evaluates the response as JSON and returns a JavaScript object. Cross-domain “json” requests are converted to “jsonp” unless the request includes jsonp: false in its request options

4

Thanks! This worked for me.

5

Specifying jsonpCallback as ‘mycallback’ worked.

Regular JSON didn’t work. I had an error message saying that cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https and XMLHttpRequest cannot load the link.

6

Still working on this… When I do console.log the quote information shows up on the console as follows:

ID = 2403
content:"

Recognizing the need is the primary condition for design.

↵"
link:"https://quotesondesign.com/charles-eames-4/"
title:“Charles Eames”

But when I tried to access the object using the code below, it doesn’t work. The console is empty too. I tried JSON.parse, but that showed an error. Any suggestions? Thanks!

$(document).ready(function(){
$(’#quotebutton’).on(‘click’, function(){
function getNewQuote(){
$.ajax({
method: ‘GET’,
url: ‘http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback’,
jsonpCallback: ‘mycallback’,
dataType: ‘jsonp’
}).done(function(data){
//console.log(data); //this works
$(’#quote’).text(data.title);
});

		}
	getNewQuote();
	});
});
7

Sorry, showing the code more clearly

   $(document).ready(function(){
	$('#quotebutton').on('click', function(){
		function getNewQuote(){
			$.ajax({
				method: 'GET',
				url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback',
				jsonpCallback: 'mycallback',
				dataType: 'jsonp'
			}).done(function(data){
				//console.log(data); //this works
				$('#quote').text(data.title);
			});
				
		}
	getNewQuote();
	});
});