Help with random quote machine

1

I got the quotes through an api.But i don’t know how to display it.Can anyone help please.
This is my codpen link.

2

When you parse the data from JSON, you save it in a variable called ‘q’. Then when you try to save the quote and author in variables, you reference a variable called ‘x’

Change these lines:
var currentQuote = x.quote;
var currentAuthor = x.author;

To:
var currentQuote = q.quote;
var currentAuthor = q.author;

3

Thanks i displayed it but when i click the button for second time its not displaying a new quote?

4

The reason for that is that when the document is loaded, the data is fetched from the API. Then when you click the button, the data that you already have is appended to the page. To fix this, pull out your AJAX request into a separate function and then call that when the button is clicked.

Example:

function getData(successCb){
   $.ajax({
        //rest of call ommitted for clarity
        success: successCb
   })
}

$(function(){
    $('#new_quote').click(function(){
        getData(function(res){
           $('#placeholder').text(res.quote + res.author)
        })
    })
})

NOTE:
I just pulled this from the top of my head and haven’t tested it, but this is the kind of logic you should be looking for.

5

i am sorry for asking again.i am a newbie.i did what u told and its still the same.Could you take a look please.

6

No problem, we all had to start somewhere.

I forked your pen and edited it so that you can see what I’m talking about. Here is a link.

Hope this helps!

7

Thank you so much.Just started learning about api and ajax**.can u again tell me about that function call**.Everything else i understood.And i completed it.Here,my final product

8

Sure, I assume you mean the anonymous function that is being passed to the getData function?

The way that this works is that when you call getData it takes a single parameter. For this parameter you can create an anonymous (unnamed) function.

Since JavaScript is an asynchronous programming language (see this stackoverflow question for an explanation of synchronous VS asynchronous), you can’t just call a function that returns a value and immediately begin working on the returned value, since JavaScript will call the function and then continue with the rest of the script before the function returns a value. To solve this, JavaScript uses callbacks. A callback is a function that is passed as a parameter to another function. This allows you to say “Ok, when the data comes back, call this function”. See the code below:

/**
 * This function makes a call to an api to retrieve a quote and calls the specified callback if the request is successful
 * @param successCb the callbak to be called if the data is retrieved successfully
 */
function getData(successCb) {
  $.ajax({
    headers: {
      'X-Mashape-Key': 'FiFQuOefUWmshkF7RgU7quiwj4Axp1SyuvmjsneuFASeDltMch',
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
    success: successCb //This is the parameter that was passed in i.e. the anonymous function created below. When the data is returned, it will be passed to the function that you created below.
  });
}
$(function() {
  $('#new_quote').click(function() {
    //we now call the function that was created above and tell it what to do with the data when it gets it
    getData(function(res) {
        //res is the quote that is returned from the server
      console.log('result', res)
      var q = JSON.parse(res);
      var currentQuote = q.quote;
      var currentAuthor = q.author;
      $('#placeholder').text(currentQuote + currentAuthor); //append the retrieved quote to the page
    })
  });
});

I’m sorry if I’m not being very clear, I’m kind of terrible at explaining myself (also, I’m not sure if this is even what you’re asking). Hopefully this will help.

1 Like
9

i understood finally.
i created a github page of it.
https://ganes1410.github.io/

Check that out and give any tips to improve.