Resources for JSON?

timotheap · January 3, 2017, 1:16pm

@KamilCybulski wow this is so cool, thanks for the link !!

FletcherMartin · January 3, 2017, 1:28pm

I have this:

var theQuote = '';
var theAuthor = '';

$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', // The URL to the API. You can get this in the API page of the API you intend to consume
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    data: {}, // Additional parameters here
    dataType: 'json',
  
    success: function(response) { 
       var r = JSON.parse(response);
    theQuote = r.quote;
      theAuthor = r.author;
 },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "OgGngs3hmYmshg4xvdL6gmKT1Nmkp1nenSpjsn71sOkr8N4qSZ"); // Enter here your Mashape key
    }
});

console.log(theQuote);

And I keep getting this:

VM1719:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse ()
at Object.success (pen.js:9)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest. (jquery.min.js:4)

FletcherMartin · January 3, 2017, 1:38pm

Holy crap! I actually got it to work!

var theQuote = '';
var theAuthor = '';

$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', // The URL to the API. You can get this in the API page of the API you intend to consume
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    data: {}, // Additional parameters here
    dataType: 'json',
  
    success: function(data) { 
      
    theQuote = data.quote;
      theAuthor = data.author;
      $('#quote-text').text(theQuote);
      $('#quote-author').text(theAuthor);
    },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "OgGngs3hmYmshg4xvdL6gmKT1Nmkp1nenSpjsn71sOkr8N4qSZ"); // Enter here your Mashape key
    }
});

timotheap · January 3, 2017, 1:39pm

Well I’ve gotten rid of what I didn’t understand () just to see what we were working with:

$(document).ready(function (){
	
	
	var theQuote = '';
	var theAuthor = '';

$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', // The URL to the API. You can get this in the API page of the API you intend to consume
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    
    dataType: 'json',
  
    success: function(response) { 
       console.log(response);
	   var quote = response.quote;
	   console.log(quote);
 },
    error: function(err) {
		alert(err); 
		},
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "OgGngs3hmYmshg4xvdL6gmKT1Nmkp1nenSpjsn71sOkr8N4qSZ"); // Enter here your Mashape key
    }
});

})

And I get this:

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/1/f/1f0f69a0a992c0f3a2661fc72201d79189e3d8f8.png" width="690" height="154">

FletcherMartin · January 3, 2017, 1:46pm

Now that I’ve gotten the API to work and can grab the data, I think the rest will be fairly smooth. Got the button working.

var theQuote = '';
var theAuthor = '';
function getQuote(){
$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', // The URL to the API. You can get this in the API page of the API you intend to consume
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc
    data: {}, // Additional parameters here
    dataType: 'json',
  
    success: function(data) { 
      
    theQuote = data.quote;
      theAuthor = data.author;
      $('#quote-text').text(theQuote);
      $('#quote-author').text(theAuthor);
    },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "OgGngs3hmYmshg4xvdL6gmKT1Nmkp1nenSpjsn71sOkr8N4qSZ"); // Enter here your Mashape key
    }
});
}
 $(document).ready(function() {
   getQuote();

    $("#getQuote").on("click", getQuote);

  });

Technically the exercise is done! (but it looks like crap and I want to do more, including the twitter functionality)

I appreciate everyone talking me through this and being patient with my frustrated tirade. Once I took a breath and started playing around it got better.

timotheap · January 3, 2017, 1:48pm

it’s ok, I think that from now on you’ll be fine because next time you’re stuck you’ll already know what’s supposed to happen - experiment…

anon97231988 · January 3, 2017, 1:48pm

Congrats. Hope you feel just as good as I do, when I manage to fix something that I couldn’t get to work for xxx hours

FletcherMartin · January 3, 2017, 2:00pm

Not really in this situation. There’s still so much I don’t know. I can handle APIs from Mashape.com now but I still don’t feel like I have a real grasp on APIs in general. I’l feel good when I can create an API from scratch and call from it. Using something like http://docs.mashape.com/javascript#jscript and then just playing around until it works isn’t satisfying or why I started FreeCodeCamp. I could already do that. I’ve never had a problem Googling until I find a block of code that does what I want.

It’s like picking a lock by raking the pins versus pushing each one individually. The former requires zero skill and minimum know-how while the latter requires a light touch and an intimate understanding of locks and lock-picking techniques.

I’ll feel good when I can build and pull from an API without the help of Google. Right now I just feel like a hack (aka script kiddy).

FletcherMartin · January 3, 2017, 2:01pm

It’s a step in the right direction. A baby step, but progress is progress.

PortableStick · January 3, 2017, 2:33pm

You know more than you think you do. jQuery’s $.ajax function applies a fair amount of unicorn magic to get things working without much input from you, including parsing the response body as JSON, which may have made this particular problem seem less familiar to you.

I had created a pen a while ago to give students a hands-on, real world challenge in creating an AJAX request. You’ve already gotten past the biggest hurdle there is with this subject (I think, anyways), but if you want to give it a try, please let me know if it helps or how it could be improved.

FletcherMartin · January 3, 2017, 2:45pm

I appreciate it and will definitely give it a look, although the biggest hurdle for me is making the CSS look halfway decent. I much prefer having a graphic designer create an image and hand it to me. >.<

FletcherMartin · January 3, 2017, 2:49pm

This is the uninspired, unimaginative dung-heap I have so far. http://codepen.io/FMartin/full/OWJRvP/

PortableStick · January 3, 2017, 2:57pm

There isn’t much room for revolution in the world of random quote machines. It works well and you learned a thing. What could be better?

FletcherMartin · January 3, 2017, 3:09pm

At the very least I’m going to add Twitter integration, which will be more API practice, and I’m thinking about animating the quote text so it types out - I’m sure there’s jquery for that.

AlannaL · January 4, 2017, 1:23pm

I’m back trying the Random Quote machine and I’m happy to report that FletcherMartin’s code worked when I tried it however, none of my attempts with various quote apis have and I just cannot figure out why! Would someone mind taking a look at my code?

timotheap · January 4, 2017, 1:32pm

in datatype: 'json' , json must be between quotation marks

AlannaL · January 4, 2017, 1:34pm

Thank you so much! I knew it was something stupid. Hopefully now it will be smooth sailing

timotheap · January 4, 2017, 1:35pm

I just had to look in the console, it said “json is not defined” Good luck !

AlannaL · January 4, 2017, 1:36pm

Haha, okay it’s not working afterall and I have no idea what it means but at least one less problem to work with!

AlannaL · January 4, 2017, 1:39pm

But if I can get a hint, because I have a feeling you know the answer, it’s not a CORS problem, right?