How to Call API in JavaScript

Mehvish Ashiq Feb 02, 2024
  1. Use the Getuser() Function to Call and Get Response of the API in JavaScript
  2. Create Another API to Send a POST Request in JavaScript
How to Call API in JavaScript

API stands for Application Programming Interface, which means it is a collection of protocols and definitions for developing & integrating different software applications.

An API is a way to send and fetch information between various interfaces and in real-time from the server or send data to the server.

Use the Getuser() Function to Call and Get Response of the API in JavaScript

We will use a public API and save the URL in the api_url variable. You can refer to more public APIs here.

<html lang="en">
	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	</head>
 	<body>
 		<div class="content">
 			<div class="details">
 				<h2>Random User's Details</h2>
 				<table>
 					<tr>
 						<td>Full Name</td>
 						<td><span id="fullname"></span></td>
 					</tr>
 					<tr>
 						<td>Age</td>
 						<td><span id="age"></span></td>
 					</tr>
 					<tr>
 						<td>Gender</td>
 						<td><span id="gender"></span></td>
 					</tr>
 					<tr>
 						<td>Location</td>
 						<td><span id="location"></span></td>
 					</tr>
 					<tr>
 						<td>Country</td>
 						<td><span id="country"></span></td>
 					</tr>
 				</table>
 			</div>
 		</div>
 	</body>
</html>
.content {
 	text-align: center;
 	padding: 30px;
 	margin: 0px auto;
}
.details {
 	margin-left: auto;
 	margin-right: auto;
}
table,
td {
 	border-collapse: collapse;
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
 	padding: 10px;
 	border: 1px solid black;
}
const api_url = 'https://randomuser.me/api/';
async function getUser() {
  // making a call to API
  const response = await fetch(api_url);

  // converting it to JSON format
  const data = await response.json();

  // getting data/information from JSON
  const user = data.results[0];
  let {first, last} = user.name;
  let {gender, email, phone} = user;
  let age = user.dob.age;
  let {city, state, country} = user.location;
  let fullName = first + ' ' + last;

  // getting access to the span container
  document.querySelector('#fullname').textContent = fullName;
  document.querySelector('#age').textContent = age;
  document.querySelector('#gender').textContent = gender;
  document.querySelector('#location').textContent = city + ', ' + state;
  document.querySelector('#country').textContent = country;
}
// Calling the getUser() function
getUser();

To check the output, we can open the console window by pressing Ctrl+Shift+J in Google Chrome and Edge or by going to Right Click -> Inspect -> Console.

OUTPUT:

call an API in javascript

Note
You may get a different user’s details because every time we run the code, we get a random user.

We can ensure that the information is visible even after the page is loaded fully by using async and await.

Async and await are used for asynchronous programming. The Async always makes sure that a Promise is returned because it always gives value back.

And, if it doesn’t, then the JavaScript immediately wraps it in a Promise that is solved with its value. We use the await function to wait for the Promise.

This can only be used within the async block. The await function makes the async block wait until the result is returned by a Promise.

The fetch() method takes the URL as a parameter and fetches the required resources asynchronously over the network.

Create Another API to Send a POST Request in JavaScript

const api_url = 'https://httpbin.org/post';
async function getUser() {
  const response = await fetch(api_url, {
    method: 'POST',
    headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
    body: JSON.stringify({
      fullname: 'Thomas John',
      age: 33,
      gender: 'male',
      location: 'Miam',
      country: 'USA'
    })
  });
  const data = await response.json();
  console.log(data);
}
// Calling the function
getUser();

The result returned by this method is known as response. We parse this response into JSON using response.json().

We retrieve the data/information from the JSON and save it in different variables using Destructuring Assignment. After that, we get access to the <span> container and modify their textContent.

OUTPUT (JSON):

{
  args: { ... },
  data: "{\&quot;fullname\&quot;:\&quot;Thomas John\&quot;,\&quot;age\&quot;:33,\&quot;gender\&quot;:\&quot;male\&quot;,\&quot;location\&quot;:\&quot;Miam\&quot;,\&quot;country\&quot;:\&quot;USA\&quot;}",
  files: { ... },
  form: { ... },
  headers: {
    Accept: "application/json",
    Accept-Encoding: "gzip, deflate, br",
    Accept-Language: "en-GB,en-US;q=0.9,en;q=0.8,ur;q=0.7",
    Content-Length: "85",
    Content-Type: "application/json",
    Host: "httpbin.org",
    Origin: "https://fiddle.jshell.net",
    Referer: "https://fiddle.jshell.net/",
    Sec-Ch-Ua: "\&quot; Not A;Brand\&quot;;v=\&quot;99\&quot;, \&quot;Chromium\&quot;;v=\&quot;98\&quot;, \&quot;Google Chrome\&quot;;v=\&quot;98\&quot;",
    Sec-Ch-Ua-Mobile: "?0",
    Sec-Ch-Ua-Platform: "\&quot;Windows\&quot;",
    Sec-Fetch-Dest: "empty",
    Sec-Fetch-Mode: "cors",
    Sec-Fetch-Site: "cross-site",
    User-Agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.82 Safari/537.36",
    X-Amzn-Trace-Id: "Root=1-6207e40f-1146923e2704c7e8542bf54e"
  },
  json: {
    age: 33,
    country: "USA",
    fullname: "Thomas John",
    gender: "male",
    location: "Miam"
  },
  origin: "119.153.33.34",
  url: "https://httpbin.org/post"
}

We are using JSON.stringify() to convert into a string because the value of body can only be the string or an object.

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook