Random quote machine API stopped showing results / HELP

1

Hi campers. I finished my Random Quote Machine project a while ago.
Recently I noticed my app stopped showing quotes and author.
In console everything works just fine with no errors, but not on page.

Here is project-link : https://codepen.io/dknvmlhok/pen/JOXYvj?editors=0010

Any tips what went wrong? I’d really appreciate help.
Thank you!

PS: Challenge example uses the same API and their works.

2

Notice that it actually prints a string when you log quotes. So probably the API changed the type of data they return from JSON to plain text. You can simply parse that text into JSON with: JSON.parse(quotes).

Not related, but it would make more sense to create a function for the AJAX request. And then run that function both when the page loads and the button is clicked, instead of having duplicate code.

3

Wow it works like charm! Thank you I did not know about the JSON.parse :slight_smile:
And I created the function like you said and it looks much better. When I wrote the app I was simply happy it worked and didn’t really think about that :sweat_smile:

So this is my code now

$(document).ready(function(){
 
  function ajaxCall(){
   $.ajax( {
    type: "GET",
    url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous",
    headers: {
      "X-Mashape-Key": "Kn3fReAYtZmsh5PU6zjic1XxNnadp19EpAtjsnMBh4LNzvnPbc", 
      "Accept" : "application/json"},
    success: function(data){
      let quotes = JSON.parse(data);
      $("#quote, #author").fadeOut(function(){
        $("#quote").html(quotes.quote)
        $("#author").html(quotes.author)
      }).fadeIn();
     
      $("#twitterShare").attr("href", "https://twitter.com/intent/tweet?text="
                              + quotes.quote + "%0a- " + quotes.author)
     }
     });
   } 
  
$("#quoteButton").click(ajaxCall);/*random quote on click the quoteButton*/
$(ajaxCall);/*random quote on document.ready*/
  
});
1 Like