JSON and API calls In JavaScript | JavaScipt Tutorial #52 min read

In the Previous Tutorial, We Learned About Objects and Arrays In JavaScript, Creating an Array In JavaScript, and Creating an Object In JavaScript, If You Have Missed It You Can Access It Here: Objects and Arrays In JavaScript.

What is JSON?

JavaScript Object Notation (JSON) is a lightweight data-interchange format that is based on a subset of the JavaScript programming language. It is commonly used to transmit data between a server and a web application, or between two web applications.

JSON is a text-based format, and consists of key-value pairs, arrays, and objects. Here is an example of a JSON object:

{
“name”: “John”,
“age”: 30,
“skills”: [“JavaScript”, “HTML”, “CSS”]
}

To parse a JSON object in JavaScript, you can use the JSON.parse method. This method takes a string as input and returns a JavaScript object. For example:

var obj = JSON.parse(‘{“name”:”John”,”age”:30,”skills”:
[“JavaScript”,”HTML”,”CSS”]}’);

To convert a JavaScript object to a JSON string, you can use the `JSON.stringify` method. This method takes an object as input and returns a JSON string. For example:

var str = JSON.stringify(obj);

What is an API?

An API (application programming interface) is a set of rules and protocols that define how two software components communicate with each other. APIs are commonly used to allow web applications to access data or services provided by other applications.

To make API calls in JavaScript, you can use the Fetch function, a built-in function for making HTTP requests. The search function returns a promise. This resolves to a response object containing the data returned by the API.

Here is an example:

How to make an API call using the call function:

fetch(“https://api.example.com/endpoint”)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Use the data here
});

In the example above, the `fetch` function makes a GET request to the specified API endpoint. The `response.json()` method is used to parse the response data as a JSON object.

You can also pass options to the `fetch` function to specify the type of request (e.g. GET, POST, DELETE), the data to be sent with the request, and other options. For example:

fetch(“https://api.example.com/endpoint”, {
method: “POST”,
body: JSON.stringify({ name: “John” }),
headers: { “Content-Type”: “application/json” }
})
.then(function(response) {
return response.json();
})
.then(function(data) {
// Use the data here
});

It is important to note that API calls are asynchronous, which means that the rest of your code will continue to execute while the API call is being made. This can lead to some complexity when working with API data, as you may need to handle the data after it is returned by the API.