Practice Questions — Fetch API - Getting Data from the Internet

async function displayUser(id) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
    if (!response.ok) throw new Error('User not found');
    const user = await response.json();
    console.log('Name:', user.name);
    console.log('Email:', user.email);
    console.log('City:', user.address.city);
  } catch (error) {
    console.log('Error:', error.message);
  }
}

displayUser(1);

async function getUserNames(ids) {
  const promises = ids.map(id =>
    fetch('https://jsonplaceholder.typicode.com/users/' + id)
      .then(r => r.json())
      .then(user => user.name)
  );
  return Promise.all(promises);
}

getUserNames([1, 2, 3]).then(names => console.log(names));

async function createPost(title, body) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, body, userId: 1 })
    });
    if (!response.ok) throw new Error('Failed to create');
    const post = await response.json();
    console.log('Created post #' + post.id + ': ' + post.title);
  } catch (error) {
    console.log('Error:', error.message);
  }
}

createPost('My Post', 'Hello world');

async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return { ok: false, error: 'HTTP ' + response.status + ': ' + response.statusText };
    }
    const data = await response.json();
    return { ok: true, data };
  } catch (error) {
    return { ok: false, error: error.message };
  }
}

async function demo() {
  const r1 = await safeFetch('https://jsonplaceholder.typicode.com/users/1');
  console.log(r1.ok ? r1.data.name : r1.error);

  const r2 = await safeFetch('https://jsonplaceholder.typicode.com/users/9999');
  console.log(r2.ok ? r2.data.name : r2.error);
}
demo();

// HTML: <div id="app"></div>

async function loadUsers() {
  const app = document.getElementById('app');
  app.innerHTML = '<p>Loading users...</p>';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) throw new Error('Failed: HTTP ' + response.status);
    const users = await response.json();

    app.innerHTML = '';
    users.forEach(user => {
      const card = document.createElement('div');
      card.style.cssText = 'background:#16213e;padding:16px;margin:8px;border-radius:8px;';
      card.innerHTML = '<h3>' + user.name + '</h3>' +
        '<p>Email: ' + user.email + '</p>' +
        '<p>City: ' + user.address.city + '</p>';
      app.appendChild(card);
    });
  } catch (error) {
    app.innerHTML = '<p style="color:#ef4444;">Error: ' + error.message + '</p>';
  }
}

loadUsers();

let allPosts = [];

async function loadPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  allPosts = await response.json();
  console.log('Loaded', allPosts.length, 'posts');
}

function searchPosts(keyword) {
  const kw = keyword.toLowerCase();
  const results = allPosts.filter(post =>
    post.title.toLowerCase().includes(kw) ||
    post.body.toLowerCase().includes(kw)
  );

  console.log('Found ' + results.length + " posts containing '" + keyword + "'");
  results.forEach(post => console.log(' - ' + post.title));
  return results;
}

async function main() {
  await loadPosts();
  searchPosts('sunt');
}
main();

async function loadUserPage(userId) {
  try {
    const [user, posts] = await Promise.all([
      fetch('https://jsonplaceholder.typicode.com/users/' + userId).then(r => r.json()),
      fetch('https://jsonplaceholder.typicode.com/posts?userId=' + userId).then(r => r.json())
    ]);

    console.log('User:', user.name, '(' + user.email + ')');
    console.log('Posts (' + posts.length + '):');
    posts.forEach(post => console.log(' - ' + post.title));
  } catch (error) {
    console.log('Error:', error.message);
  }
}

loadUserPage(1);

const cache = new Map();

async function cachedFetch(url) {
  if (cache.has(url)) {
    console.log('[cache] returned', url);
    return cache.get(url);
  }

  const response = await fetch(url);
  if (!response.ok) throw new Error('HTTP ' + response.status);
  const data = await response.json();

  cache.set(url, data);
  console.log('[network] fetched', url);
  return data;
}

async function demo() {
  const user1 = await cachedFetch('https://jsonplaceholder.typicode.com/users/1');
  console.log(user1.name);

  const user1again = await cachedFetch('https://jsonplaceholder.typicode.com/users/1');
  console.log(user1again.name);

  console.log('Cache size:', cache.size);
}
demo();