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

  • Tools like React Native enable building native apps using JavaScript.
  • Example: Facebook's mobile app.
  • Frameworks like Electron allow creating cross-platform desktop apps.
  • Example: Visual Studio Code.

Dec 10, 2024
Read More
Tutorial
javascript

History and Evolution

  • Interpreted: Runs directly in the browser without requiring compilation.
  • Versatile: Works for front-end, back-end, and hybrid development.
  • Event-Driven: Handles user interactions dynamically.
  • Cross-Platform: Runs on any device with a browser.
  • Essential for web development.
  • Versatile for building web apps, mobile apps, and more.
  • Backed by a massive community and ecosystem.

Dec 10, 2024
Read More
Tutorial
php

Exporting Table Row Data to CSV in JavaScript

Here’s a complete example of the HTML and JavaScript code together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Table Row to CSV</title>
</head>
<body>

<table>
    <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Cherry</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
    <tr>
        <td>Dog</td>
        <td>Cat</td>
        <td>Bird</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
</table>

<script>
    // 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();
        });
    });
</script>

</body>
</html>

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!