Quote Machine Challenge

Hello,
I don’t understand the jQuery, in the section attached to JSON APIs Ajax, i understand the course.
But then when i try to do it myself i get stuck to how to use api with the example they give in the course just before.
For example, in the course they never use $.ajax( …
But when i see your feedback guys, you are using it, so i get confused.
I try to do it like the course and i wrote this:

$(document).ready(function(){
       
  $(".btn").on("click", function(){
    $.getJSON("https://andruxnet-random-famous-quotes.p.mashape.com/", function(json){
    $(".quotes").html(JSON.stringify(json)); 
    });

  });
                  });

And my API doesnt work, i click but nothin happened. Help please

Thank you

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

  1. You don’t need to use JSON.stringify for incoming JSON data. If the API you’re querying response with JSON, then you should be good to go without manipulating the returning data.
  2. Make sure you have your API keys in place (if required).
  3. Please share your project if you have further questions. It’s much easier for us to help you if we can see all of your code.

Thank you

Look i have a key from this web site https://market.mashape.com/andruxnet/random-famous-quotes#
but i dont know how to use it.
When i copy paste the endpoint, the browser tell me that i need the key.

I was able to get this to work (with a valid API key that I got off that site). Let me know if it doesn’t work.

$.ajax({
  url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
  type: 'POST',
  data: {},
  dataType: 'json',
  beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", API_KEY);
  },
  success: function(data) {    
    console.log(data);
  },
  error: function(err) { console.log("Failure!..."); console.log(err); }
}); 

I am still new, i use only jquery, so i guess i will copy paste the url in my code ?

That is JQuery - the $ stands for JQuery. I just used $.ajax for more control. Here is a link to a working pen. (Don’t use my API key for evil.)

Ok thank you sir :slight_smile: dont worry

i dont know how to use your key with the link, can you help me ?

The key is embedded in the code, the first line. You should be able to hit run and after a few seconds it outputs your quote to the console. Be sure to hit “EDIT ON CODEPEN” so you can see it in its own window.

To use this code, just cut and paste into your pen and switch the key to your key. The code is this:

var API_KEY = "your-api-key-goes-here";

$.ajax({
  url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
  type: 'POST',
  data: {},
  dataType: 'json',
  beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", API_KEY);
  },
  success: function(data) { 
    console.log("Success!..."); 
    console.log(data);
  },
  error: function(err) { 
    console.log("Failure!..."); 
    console.log(err); 
  }
}); 

I should restress - to get to the pen, select “EDIT ON CODEPEN” (upper right corner of the link box) and run it in its own window. You may have to select “RUN PEN” first to have the EDIT option pop up, but I find the “RUN PEN” option all but worthless because you usually can’t see the whole thing and can’t see the code.

Another source of confusion is the console, perhaps? There are two consoles, one on codepen and one from the browser. The codepen console is usually the bottom pane and you may have to select the button that says “console” to see it. The browser console (which I find much more useful) can usually be brought up by ctrl-shft-j (depending on browser/device).

The console is where the statement console.log outputs and is not the same as where your html outputs.

the thing is i dont want to change everyhing in my code to adapt to your code.
My quote machine works with an api without key, but im not happy, i want use the api i choose.
I saw on youtube that i have to add my key to the end of the url and put ? to start my query.

When i put my key, json doesnt show off, im frustrated.

This is my url + my key started at “X-Mashape…”

https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=10&X-Mashape-Key=tzXlShQE58mshigJbFTRFpPh7rNgp1QaECVjsn3RL072oIqvWA

Sorry, I wasn’t trying to force you into rewriting your code. I was showing you a working example of the API you are trying to use. You don’t need to start from scratch. Where you have your $.getJSON just replace it with the code I have provided.

But first: Do you understand the code I provided? Have you gotten it working?

If you provide a link to the code you are working on, I could help you better.

1 Like

Hello,

The thing is i want it to work with .getJSON, i want to know why it doesn't work like that i can fix it by myself the next time a problem occur. I could take your code your show me with Ajax (it work though) but it will not helping me cuz i am focusing on .getJSON.

Here my link, it works with Chuck Norris API.
https://codepen.io/Atalaa/pen/ZyEEEY

But i want to use the famous movie quote API.
https://market.mashape.com/andruxnet/random-famous-quotes#get-endpoint

So when i get the key api, i add it like this:

https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=10&
+
X-Mashape-Key=tzXlShQE58mshigJbFTRFpPh7rNgp1QaECVjsn3RL072oIqvWA
=

https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=10&X-Mashape-Key=tzXlShQE58mshigJbFTRFpPh7rNgp1QaECVjsn3RL072oIqvWA

But the JSON dont appear they still ask me a key

First of all, $.getJSON and $.ajax are basically the same thing (by my understanding). It’s just that $.getJSON makes certain assumptions. It’s like going into a Chinese restaurant. If the #4 special gives you everything you want, you can just order that and it’s easy. But if you want to make 5 substitutions and add a few things and subtract others - they may tell you to get lost. $.getJSON is like a Chinese restaurant that is great if you what you want is simple and straightforward. If you need anything more complicated, you need to go next door to $.ajax. But if you look in back, you see that they are the exact same kitchen, cooks, and ingredients. They just have different attitudes about what you can order.

Sometimes that doesn’t matter because you can pass all the info you need in url string. I could not see how to pass the key in the url string. The web site offers no hints. And I didn’t know how to pass request headers in a $.getJSON so I used the more flexible and accommodating version, $.ajax. It does the same thing, it just looks different.

Since you insist and I was curious, I did more research and found that you can send request headers in a .getJSON, and you can do it thusly:

var API_KEY = "your-api-key-goes-here";

var url = "https://api.icndb.com/jokes/random";

$.getJSON(url, {"mashape-key": API_KEY }, function(json){
  console.log(json);
});

and with a little tinkering I also got it to work with just the url:

var API_KEY = "your-api-key-goes-here";
var url = "https://api.icndb.com/jokes/random?mashape-key=" + API_KEY;

$.getJSON(url, function(json){
  console.log(json);
});

If you want that “movies” string to work, you need to change the query a little to:

https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=10&mashape-key=tzXlShQE58mshigJbFTRFpPh7rNgp1QaECVjsn3RL072oIqvWA

Note that it is mashape-key and not X-Mashape-Key.

Let me know if that doesn’t work.

With your API key, that is:

var url = "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=10&mashape-key=tzXlShQE58mshigJbFTRFpPh7rNgp1QaECVjsn3RL072oIqvWA";

$.getJSON(url, function(json){
  console.log(json);
});
1 Like

Thank you for your answer.
How did you guess that you should write mashape-key and not X-Mashape-Key ?
That was my problem, if i knew how to write the variable key everything should be fine.

Thnak you

I think I saw it used that way on their web page. And most URL things are lowercase.

Can you tell me where on the webpage,i didnt see it.
I will make a seconde Random quote machine with the movies quote.

I’ve tried to retrace my steps but can’t. I really don’t know how I got there - it was kind of a rushed thing while I was doing something else. I think a clue was:

“message”: “Missing Mashape application key. Go to http://docs.mashape.com/api-keys to learn how to get your API application key.”

Notice that it wasn’t saying the key was wrong, but that it didn’t exist. So, it’s wasn’t that the API was getting the wrong key but that I was sending it the wrong way, the query string was wrong. If it were receiving a key but the key was wrong, we would get this:

“message”: “Invalid Mashape Key”

I think I tried some different combinations.

I did just now find this - but I don’t think that’s where I found it because I can’t find it in my history. Maybe I saw something like it somehwere else. About halfway down the page is as section called “Query Parameters” that has this information.

Dealing with APIs can be a pain in the culo.They aren’t standardized and often documentation is spotty and incomplete. Sometimes you have to go threw a maze in documentation to find a simple piece of info. And then sometimes they just decide to change it on you with no warning. Welcome to the Wild West of the internet.

Thank you bro, i will start my Local Weather Challenge next week i will probably ask your help as well if you can .

1 Like