JavaScript Problem: Using Fetch to Retrieve Cryptocurrency Data

XMLHttpRequest is a tired solution for retrieving data from a site. In this tutorial we will look at the fetch API. And we will use the coinmarketcap cryptocurrency site as an example site in retrieving data. We will look at the process of getting an API Key and then retrieving the data we want.

For more resources on JavaScript:

Full personalized courses on JavaScript:
Courses offered on Udemy: Getting Started or Advanced Topics at a huge discount:

Tutorials referred to in this video:

#javascript #AllThingsJavaScriptLLC

[guitarfeller]

Of all the videos I've seen, yours is the best. Thank you for providing this series of js tutorials!

[alfonsoramirezelorriaga]

All I can say is God bless you. Please keep posting amzing content.

[flopasen]

thanks so much, i'll be watching more of these great videos

[vont]

I'm a beginner. I've watched this video, some questions:
1) the first part i am lost is when you said you've hidden the api key. Can you explain or show where you store that api key? you stored it in the app.js file via a variable apiKey in the app.js file? you can always blank out the key on the video, but at least show how or where you store it.
2) what is CMC_PRO_API_KEY? where to get this string "CMC_PRO_API_KEY"? is this the standard syntax for the query string for key? it's always written as CMC_PRO_API_KEY?

You've been saying fetch() is very simple. Perhaps to you and maybe other non-beginners. My opinion is that it's not that simple as you, an experienced, have said.

I know you're trying to explain it as best you can, but, for beginner like me, it's not that clear. Perhaps it's clear for someone who is not a beginner. That's also the problem nowadays for most tutorials, as most authors tend to not able to understand how a beginner learns new concepts. However, your video is at least better than many many others.

[alfonsoramirezelorriaga]

One question. The variable url is storing 3 strings and a the variable apikey. According to all I know until this point, let url should be an array. Why is it okey to store those different data types in a single variable?

[owolabiolaoluwa]

#FNX will be used as the medium of exchange to quantify and pay the costs of the consumed resources.

[oolumee]

How do you hide your api key? I am getting Cors error when making call.

[imike]

Why would you not just create the apikey then regenerate it once the video was done?

[kaos]

From the CMC API documentation:

Note: Making HTTP requests on the client side with Javascript is currently prohibited through CORS configuration. This is to protect your API Key which should not be visible to users of your application so your API Key is not stolen. Secure your API Key by routing calls through your own backend service.

How did you secure the API key? Currently impossible to retrieve anything with the fetch api

[theonewhowas]

can you show video how to remove time and data stamps from elements and print only the values? using for loop... for loop would be most ideal.. thnx
going from an object array to just the json value..

[proprstrangr]

I am receiving errors Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 504. Can you update this tutorial to reflect this? Was accessing this API with javascript allowed at a certain point and then removed?

[maxiequa]

Is it possible to access custom JSON data parameters (by id, for example) from a file hosted on static shared hosting provider? /users/id fails but /users works. so can access the entire JSON file data but not single data objects? Adding the trailing / and any parameters there after fails to fetch or render to screen. Do you have any suggestions/example videos you can share?

[pjmclenon]

hello im not understanding i load the javascript file in a local web server and all i get is javascript code in the web browsr and no console log output, dont you have to make the html file ?...lisa thank you

[rickyu]

Would you suggest using axios for node 8.x?