In today’s digital era, data must be managed in an efficient manner to ensure user satisfaction with websites. A common way to display user information dynamically is to retrieve data from an API and present it on a web page.
Understanding APIs and their role in web development
APIs are utilized to facilitate communication and data exchange between software applications. Web development makes use of APIs to obtain information from a server without having to refresh the page. This is an efficient method. To illustrate, a user may input information such as name, email, and other profile details into the Information API. By utilizing this method, development time is conserved and data can be managed easily on multiple platforms.
We’ll use the JSONPlaceholder API, for an example, which is a free online service that provides dummy data sets for testing and learning purposes.
Step-by-Step Guide to Fetching and Displaying Data with JavaScript
Set Up the HTML Table Structure :Â
To display user data, create an HTML table with headers such as “Email,” “ID,” “Name,” etc. Each column will represent a specific attribute of the user data. The use of table format allows for an organized view and user-friendly interface.
<table class="table table-bordered">
<thead>
<tr>
<th>Email</th>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Username</th>
<th>Website</th>
</tr>
</thead>
<tbody id="userdata">
<!-- User data will populate here -->
</tbody>
</table>
Write JavaScript Code to Fetch Data :
To fetch data from an API, JavaScript’s Fetch API can be used. This API enables us to send HTTP requests and receive responses asynchronously, meaning there is no need to reload the page while waiting for data. Here is the code to fetch and display user data:
async function callApi() {
try {
let result = await fetch('https://jsonplaceholder.typicode.com/users');
result = await result.json();
document.getElementById("userdata").innerHTML = result.map(user =>
`<tr>
<td>${user.email}</td>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.phone}</td>
<td>${user.username}</td>
<td>${user.website}</td>
</tr>`
).join('');
} catch (error) {
console.error("Error fetching data: ", error);
}
}
callApi();
Here are the details of the code:
await fetch(...): Fetches data from the specified API.result.json(): Converts the raw data into a JavaScript object.result.map(...): Maps each user object to a new HTML table row.
Testing and Refinement
It is necessary to test the code to make sure everything displays correctly. Open the page in a browser, and you should see the user data loaded into the table. Using browser developer tools, you can verify that the data was received properly and troubleshoot any issues.
Conclusion
Using JavaScript to fetch and display API data is an efficient approach for developers who want to keep content dynamic and relevant. This method ensures that data is up to date and reduces the load on the server, making it a scalable solution. For any developer who wants to improve the interactivity and SEO potential of their website, mastering API data fetching is a highly valuable skill.
Fetch Data Api in Javascript Source Code
Send download link to:
