DeveloperBreeze

Fetch JSON Data from API in JavaScript

javascript
Fetch API JSON Asynchronous 
// Fetch JSON data from an API using the Fetch API
fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

Related Posts

More content you might like

Tutorial
javascript

JavaScript in Modern Web Development

  • JavaScript is used in IoT devices for controlling hardware and sensors.
  • Example: Node.js-based IoT applications.
  • Libraries like Three.js and Babylon.js enable building browser-based games.
  • Example: Interactive 3D experiences.

Dec 10, 2024
Read More
Tutorial
javascript

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

const data = {
    name: "أحمد",
    address: {
        city: "الرياض",
        postalCode: "12345"
    },
    skills: ["برمجة", "تصميم", "تحليل"]
};

console.log(data.address.city);  // الرياض
console.log(data.skills[0]);     // برمجة

أحيانًا قد تواجه أخطاء أثناء تحويل JSON، سواء كان ذلك بسبب تنسيق غير صالح أو مشكلة أخرى. يمكنك استخدام try...catch لمعالجة الأخطاء.

Sep 26, 2024
Read More
Tutorial
javascript

AJAX with JavaScript: A Practical Guide

Before the Fetch API, the traditional way to make AJAX requests was using XMLHttpRequest.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with XMLHttpRequest</title>
</head>
<body>
    <button id="fetchDataBtn">Fetch Data</button>
    <div id="dataOutput"></div>

    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

            xhr.onload = function() {
                if (this.status === 200) {
                    var data = JSON.parse(this.responseText);
                    document.getElementById('dataOutput').innerHTML = `
                        <h3>${data.title}</h3>
                        <p>${data.body}</p>
                    `;
                }
            };

            xhr.onerror = function() {
                console.error('Request failed.');
            };

            xhr.send();
        });
    </script>
</body>
</html>

Sep 18, 2024
Read More
Tutorial
go

Building a RESTful API with Go and Gorilla Mux 

   go get -u github.com/gorilla/mux

Create a new file named models.go to define the data structure for a book:

Aug 12, 2024
Read More

Discussion 0

Please sign in to join the discussion.

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