jQuery-Ajax Random quote generator

1

I’m working on the exercise of the Random Quote Generator and I do not get why this is not working.

Link is right here:

code on JS that is not working:

var ourQuote = "";
var ourAuthor = "";

function getQuote(){
  $.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=', // 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) {
      var r = JSON.parse(data);
      ourQuote = r.quote;
      ourAuthor = r.Author;
      $("#quote").html("ourQuote");
      $("#author").html("ourAuthour");
       },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V"); // Enter here your Mashape key
    }
});
}

$(document).ready(function(){
  getQuote();
  $(".qButton").on('click', getQuote);
                  
});
1 Like
2

There are a few problems.

  1. You don’t need JSON.parse. It’s complaining because it’s trying to parse something that’s already JSON.
  2. You’ve capitalized Author when assigning to the variable ourAuthor.
  3. You’ve got quotes around your variable names when assigning the text to your markup.
$("#quote").html("ourQuote");
$("#author").html("ourAuthour");

You’re very close, though!

1 Like
3

Ohhh, thank you so much ! I already got it, I can style it properly now :smiley:

4

beforeSend: function(xhr) {
xhr.setRequestHeader(“X-Mashape-Authorization”, “OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V”);
what does that means

1 Like
5

It’s in reference to the XHR object which is short for XMLHttpRequest and it looks like it’s passing some kind of API keys in the header to start communication. Hope this helps :smile:

1 Like