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>

Continue Reading

Handpicked posts just for you — based on your current read.

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 Tutorial

History and Evolution

  • JavaScript powers not only browsers but also servers (Node.js), mobile apps, and even IoT devices.
  • Widely used frameworks like React, Angular, and Vue have further cemented its role in modern development.
  • 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.

Dec 10, 2024 Tutorial

Exporting Table Row Data to CSV in JavaScript

In this tutorial, we’ve learned how to export individual table rows as CSV files using plain JavaScript. By attaching event listeners to "Export" buttons within each row, we were able to dynamically generate CSV files based on the data in each row. This functionality can be especially useful in applications where users need to download specific data sets for further analysis.

  • We used JavaScript to dynamically extract table data and generate CSV files.
  • The use of event listeners allows for interactive exports, making the application user-friendly.
  • This approach is versatile and can be extended to handle more complex tables or different export formats.

Oct 24, 2024 Tutorial

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

No preview available for this content.

Oct 24, 2024 Article

الفرق بين let و const و var في JavaScript 

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 7;
  • const تم تقديمها في ES6 وتستخدم لتعريف المتغيرات التي لا تتغير قيمتها بعد الإعلان عنها.
  • نطاق المتغير: مثل let، المتغيرات المُعلنة باستخدام const تكون ذات نطاق كتلة.
  • إعادة التعيين: لا يمكن إعادة تعيين أو تعديل قيمة المتغير المُعرّف باستخدام const.

Sep 26, 2024 Tutorial

التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها

في هذا الدليل، سنتعلم كيفية التعامل مع JSON في JavaScript، بما في ذلك قراءة البيانات وكتابتها.

JSON هو تنسيق يستخدم في تبادل البيانات يشبه الكائنات في JavaScript. يتكون JSON من أزواج مفتاح-قيمة (key-value pairs) تمامًا مثل الكائنات، وهو مدعوم في معظم لغات البرمجة.

Sep 26, 2024 Tutorial

البرمجة الكائنية (OOP) في JavaScript: المفاهيم الأساسية والتطبيقات

التغليف هو عملية إخفاء تفاصيل التنفيذ الداخلية للكائن عن العالم الخارجي. يمكن تحقيق ذلك في JavaScript باستخدام الفئات والفئات الخاصة (private classes).

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this._balance = balance;  // خاص
    }

    deposit(amount) {
        if (amount > 0) {
            this._balance += amount;
            console.log(`تم إضافة ${amount} إلى الحساب.`);
        }
    }

    getBalance() {
        return this._balance;
    }
}

const account = new BankAccount("علي", 1000);
account.deposit(500);
console.log(account.getBalance());  // 1500

Sep 26, 2024 Tutorial

Easy JavaScript Tutorial for Beginners 

let i = 0;
while (i < 5) {
    console.log("Iteration: " + i);
    i++;
}

Functions are reusable blocks of code that perform a specific task.

Sep 18, 2024 Tutorial

AJAX with JavaScript: A Practical Guide

AJAX is not a single technology but a combination of:

  • JavaScript: To interact with the DOM and make HTTP requests.
  • XMLHttpRequest or the Fetch API: To send and receive data from a web server.
  • JSON or XML: For data formatting.
  • HTML/CSS: For rendering the data on the webpage.

Sep 18, 2024 Tutorial

Understanding JavaScript Classes

JavaScript classes provide a powerful and intuitive way to structure your code using object-oriented principles. By understanding how to use constructors, inheritance, static methods, private fields, and getters/setters, you can write more organized and maintainable code. This tutorial has covered the fundamentals and some advanced features of JavaScript classes, giving you the tools you need to effectively use classes in your projects.

  • Experiment with building your own classes and using inheritance to create complex hierarchies.
  • Explore more advanced class features like mixins and decorators.
  • Consider how classes can improve the organization and scalability of your existing codebase.

Sep 02, 2024 Tutorial

MDN's In-Depth JavaScript Guide: A Comprehensive Resource for Developers 

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myText').textContent = 'Button Clicked!';
});

This section is essential for anyone looking to build interactive web applications.

Aug 30, 2024 Tutorial

Understanding ES6: A Modern JavaScript Tutorial 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data fetched successfully");
    }, 2000);
});

promise
    .then((data) => {
        console.log(data); // Output: Data fetched successfully
    })
    .catch((error) => {
        console.error(error);
    });

Chaining Promises:

Aug 30, 2024 Tutorial

Understanding the DOM in JavaScript: A Comprehensive Guide

Removing elements is just as straightforward as adding them. Use the removeChild or remove method.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement); // Removes childElement from parentElement

Aug 30, 2024 Tutorial

Building a RESTful API with Go and Gorilla Mux

Create a new file named main.go and set up the basic structure of the application:

package main

import (
	"encoding/json"
	"net/http"
	"github.com/gorilla/mux"
)

var books []Book

func main() {
	router := mux.NewRouter()

	// Define routes
	router.HandleFunc("/books", getBooks).Methods("GET")
	router.HandleFunc("/books/{id}", getBook).Methods("GET")
	router.HandleFunc("/books", createBook).Methods("POST")
	router.HandleFunc("/books/{id}", updateBook).Methods("PUT")
	router.HandleFunc("/books/{id}", deleteBook).Methods("DELETE")

	// Start the server
	http.ListenAndServe(":8000", router)
}

Aug 12, 2024 Tutorial

React Custom Hook for API Requests 

import React from 'react';
import useFetch from './useFetch'; // Ensure correct import path

function UserList() {
    const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

export default UserList;
  • Reusability: The useFetch hook can be used across different components and applications, reducing code duplication and simplifying API interaction.
  • Loading and Error States: Automatically manages loading and error states, providing a consistent way to handle asynchronous operations.
  • Cleanup Handling: Prevents state updates on unmounted components, reducing potential memory leaks and ensuring stability.

Aug 12, 2024 Code

How to Deep Clone a JavaScript Object 

// Using JSON methods
const deepClone = (obj) => {
    return JSON.parse(JSON.stringify(obj));
};

// Using structured cloning (modern browsers)
const deepCloneModern = structuredClone(obj);

// Usage
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);

Aug 12, 2024 Code

Python Code Snippet: Simple RESTful API with FastAPI 

from fastapi import FastAPI
from pydantic import BaseModel
from typing import List

app = FastAPI()

class Book(BaseModel):
    title: str
    author: str

# Sample data
books_db = [
    Book(title="The Catcher in the Rye", author="J.D. Salinger"),
    Book(title="To Kill a Mockingbird", author="Harper Lee"),
    Book(title="1984", author="George Orwell")
]

@app.get("/books/", response_model=List[Book])
async def get_books():
    return books_db

@app.post("/books/", response_model=Book)
async def add_book(book: Book):
    books_db.append(book)
    return book

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="127.0.0.1", port=8000)

Aug 04, 2024 Code

Creating a Simple REST API with Flask

A REST API (Representational State Transfer Application Programming Interface) is a set of rules that allow applications to communicate with each other over the web. REST APIs are commonly used to build web services and are known for their simplicity and scalability. They rely on stateless communication, typically using HTTP methods like GET, POST, PUT, DELETE, etc.

Make sure Python is installed on your machine. Then, install Flask using pip:

Aug 03, 2024 Tutorial

Password Toggle

No preview available for this content.

Jan 26, 2024 Code

JavaScript Add Animation to HTML Element

No preview available for this content.

Jan 26, 2024 Code

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!