Random quote machine API stopped showing results / HELP

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.

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.

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

  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(){
      $("#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