DeveloperBreeze

JavaScript Code Snippet: Fetch and Display Data from an API

javascript json
Fetch API JSON async/await DOM Manipulation ES6 API call 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Example</title>
</head>
<body>
    <h1>User Information</h1>
    <ul id="user-list"></ul>

    <script>
        async function fetchUserData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/users');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const users = await response.json();
                displayUsers(users);
            } catch (error) {
                console.error('Fetch error:', error);
            }
        }

        function displayUsers(users) {
            const userList = document.getElementById('user-list');
            users.forEach(user => {
                const listItem = document.createElement('li');
                listItem.textContent = `${user.name} - ${user.email}`;
                userList.appendChild(listItem);
            });
        }

        fetchUserData();
    </script>
</body>
</html>

Related Posts

More content you might like

Tutorial
javascript

JavaScript in Modern Web Development

  • Frameworks like Electron allow creating cross-platform desktop apps.
  • Example: Visual Studio Code.
  • JavaScript is used in IoT devices for controlling hardware and sensors.
  • Example: Node.js-based IoT applications.

Dec 10, 2024
Read More
Tutorial
javascript

History and Evolution

  • Competing browsers (Netscape, Internet Explorer) implemented JavaScript differently, leading to compatibility issues.
  • The advent of libraries like jQuery (2006) helped developers write cross-browser code more easily.
  • ES6 (2015): A landmark update introduced features like let, const, arrow functions, classes, template literals, and more.
  • Frequent updates: JavaScript now sees yearly updates, introducing features like async/await, optional chaining, and modules.

Dec 10, 2024
Read More
Tutorial
php

Exporting Table Row Data to CSV in JavaScript

  • Each row (<tr>) contains three data cells (<td>), followed by an "Export" button that will trigger the export action.
  • The button has a class of export-btn, which we will use to attach event listeners.

Now, we need to write the JavaScript code that will be responsible for generating and downloading the CSV file when the user clicks on the "Export" button.

Oct 24, 2024
Read More
Article
javascript

20 Useful Node.js tips to improve your Node.js development skills:

No preview available for this content.

Oct 24, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!