Fetch API

Displaying Real Data From APi using Fetch API !

User Data

JavaScript Code

      // Learning Fetch API

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
//   .then(json => document.writeln(json))


//   Basic Example
// Step 1: Make the request
fetch('https://jsonplaceholder.typicode.com/posts/1')
  // Step 2: Get the response and convert to JSON
  .then(response => {
    return response.json(); // This returns another promise
  })
  // Step 3: Use the actual data
  .then(data => {
    console.log('Title:', data.title);
    console.log('Body:', data.body);
  })
  // Step 4: Handle errors
  .catch(error => {
    console.log('Error:', error);
  });



//   Displaying Real Data

function getUser() {
        // 1. Make the request
        fetch('https://jsonplaceholder.typicode.com/users/1')
        
        // 2. Convert response to JSON
        .then(response => response.json())
        
        // 3. Display the data
        .then(user => {
            const userInfo = document.getElementById('userInfo');
            userInfo.innerHTML = `
                
Name: ${user.name}
                
Email: ${user.email}
                
Phone: ${user.phone}
            `;
                })
        
        // 4. Handle any errors
        .catch(error => {
            console.log('Failed to fetch:', error);
            document.getElementById('userInfo').innerHTML = 
                '
Failed to load user data
';
        });
    }




// HTTP METHODS, API METHODS ....
// GET Request - Read data
fetch('https://api.example.com/data')
  .then(r => r.json())
  .then(data => console.log(data));

// POST Request - Create data
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({name: 'John', age: 30})
});

// PUT Request - Update data
fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({name: 'John Updated', age: 31})
});

// DELETE Request - Remove data
fetch('https://api.example.com/data/1', {
  method: 'DELETE'
});



// Data Fetch from Restful APis



// A simple app that gets user data
async function getUserData() {
  try {
    // 1. FETCH - Get user from API
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    
    // 2. Check if response is ok
    if (!response.ok) {
      throw new Error('User not found');
    }
    
    // 3. Parse JSON (also returns a promise!)
    const user = await response.json();
    
    // 4. Use the data
    document.writeln(`👤 User: ${user.name}
`);
    document.writeln(`📧 Email: ${user.email}
`);
    
    // 5. Chain another request - get their posts
    const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${user.id}`);
    const posts = await postsResponse.json();
    
    document.writeln(`📝 Posts: ${posts.length}
`);
    
    return { user, posts };
    
  } catch(error) {
    document.writeln("❌ Error: " + error.message + "
");
  }
}

// Run it
// getUserData();

setTimeout(getUserData, 30000);