CONCEPT OF FETCH API IN JAVASCRIPT

So, Today I decided to try something new In JavaScript, which Is using the fetch method to consume API (Application Programming Interface). Honestly, JavaScript is not only a logical technology but also an interesting one and I believe the way to conquer these logics is to know more because the more you know, the more you become:

So fetching API is basically a way of injecting another person’s code into your application. Very easy right?.

According to MDN (Mozilla Developer Network), The Fetch API provides a JavaScript interface for accessing and manipulating parts of protocol, such as request and response.

There are two (2) methods which I know can be used for this.

1. Using Axios
2. Using a JavaScript method known as Fetch()

But, I will be explicitly explaining the fetch method in my own language and understanding.
Fetch():

The Fetch() method is defined on the window object which we can use to perform request and it returns a promise which we be either processed of rejected

Note: When fetching this Data, if the Data is processed, we use the then() method , if rejected we use catch() method to hold the errors.

How Fetch Works

We are going to work through this together so you actually experience and understand the entire concept.

We all are going to set up our project folder and files i.e. CSS folder that houses style sheet (style.css) file, a JS folder that house our script (main.js file) and our Index.html file.

You can structure the element how you want it look in your index file and give it a basic styling in your CSS then we walk down to the scripting file to practice the fetch method.

This is how mine looks like:

Back to our main focus, now we use the fetch method, Note the fetch() method takes in two parameter, the API URL link and the Key.

Here is how the key is gotten and declared:

Fetch(‘url’, Key)
.then((data) => {
Return data.json();
})
This data is the one we will be getting from the API url which will be returned and the json method turns it into a object.
Then we specify anther .then() method.
.then((completeDate)=> {
Console.log(CompleteData)
})

Now, you can go to your console (Browser Chrome) to see what this Data looks like.

Here (as seen in chrome)the JSON () method, converts this information to an object thereby making it easy for us to access.

After this, we use the .catch() method to get handle the error

.catch((error)=>{
Console.log(error)
})

Going back to the completeData, we have to map (Display) this Data the way we want it to look like, how do we achieve this by using the map() method which takes in three parameter i.e. the value, the index and Array
This is how our code will now look like:

.then((completeDate)=> {
First declare an empty binding here using let in this block making it a local scope which we will access again, reason because, its value will be manipulated.
Let data1 = “”;
CompleteData.map((values)=>{
data1 = in this template literals we will be pasting our mock up language that we copied from Index.html which is our structure of how this API data should look like (copy and paste the mock up)
})
})

This is how your code should look like.

According to the information your provided in mock up, start mapping it out by doing this;
Since this is arrays of object we will now target it like a normal array;
Value[0].(the name of what we are targeting) to get that specific value.
Now your code should look like this;

After we have done this mapping, then we will have to assign this data1 to the binding we created before (data1).
(photo);
We have successfully fetched this data, here is how it looks.. I hope you understood one or more here. Cheers!!

My Final result https://ikechukwu411.github.io/Crypto-Landing-Page/