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

  • Using AJAX or Fetch API, JavaScript retrieves and updates data without reloading the page.
  • Example: Infinite scrolling on social media feeds.
  • Frameworks and libraries like React, Angular, and Vue.js make it easier to build Single Page Applications (SPAs).
  • Examples: Gmail, Netflix, Trello.

Dec 10, 2024
Read More
Tutorial
javascript

History and Evolution

No preview available for this content.

Dec 10, 2024
Read More
Tutorial
php

Exporting Table Row Data to CSV in JavaScript

Here is the JavaScript code to achieve this:

// Select all export buttons
const exportButtons = document.querySelectorAll('.export-btn');

// Add event listener to each export button
exportButtons.forEach(button => {
    button.addEventListener('click', () => {
        // Get the parent row of the clicked button
        const row = button.closest('tr');

        // Get all cells in the row except the last one (which contains the export button)
        const cells = Array.from(row.querySelectorAll('td'));
        cells.pop(); // Remove the last cell (the button cell)

        // Extract the text content of each cell and wrap them in double quotes (CSV format)
        const cellValues = cells.map(cell => `"${cell.textContent}"`);

        // Create the CSV data by joining cell values with commas
        const csvData = cellValues.join(',');

        // Create a temporary anchor element for the download
        const anchor = document.createElement('a');
        anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvData);
        anchor.download = 'row_data.csv';

        // Programmatically click the anchor to trigger the download
        anchor.click();
    });
});

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!