Fetch API & Working with JSON

9. Practice Problems

1. Stringify an object with 2-space indent.
   ✨ Show Answer

   a1.js

   console.log(JSON.stringify({ a: 1, b: [2, 3] }, null, 2));

   Run Copy

2. Parse a JSON string into an object.
   ✨ Show Answer

   a2.js

   const obj = JSON.parse('{"name":"Arif","age":22}');
   console.log(obj.name, obj.age);

   Run Copy

3. Show that JSON.stringify(undefined) is the string undefined… not valid JSON.
   ✨ Show Answer

   a3.js

   console.log(JSON.stringify(undefined));     // undefined (the JS value, not the string)
   console.log(JSON.stringify({ a: undefined })); // "{}"
   console.log(JSON.stringify([undefined]));      // "[null]"

   Run Copy

4. Build a fetch wrapper getJSON(url) that throws on non-2xx.
   ✨ Show Answer

   async function getJSON(url, opts) {
       const res = await fetch(url, opts);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       return res.json();
   }

5. Build a query string for {q:"hi", page:2}.
   ✨ Show Answer

   a5.js

   const qs = new URLSearchParams({ q: "hi", page: 2 }).toString();
   console.log(qs);

   Run Copy

6. Demonstrate that fetch on 404 still resolves.
   ✨ Show Answer

   Conceptually:

   const res = await fetch("/missing");
   console.log(res.ok, res.status);   // false 404

   fetch only rejects on network failures (DNS error, offline, CORS); HTTP errors are normal Responses.

7. Show how to attach Authorization and JSON Content-Type headers.
   ✨ Show Answer

   fetch(url, {
       method: "POST",
       headers: {
           "Content-Type": "application/json",
           "Authorization": `Bearer ${token}`
       },
       body: JSON.stringify(data)
   });

8. Use JSON.stringify with a replacer function to drop secrets.
   ✨ Show Answer

   a8.js

   const hide = (k, v) => (k === "password" ? undefined : v);
   console.log(JSON.stringify({ name: "a", password: "x" }, hide));

   Run Copy

9. Use JSON.parse with a reviver to convert ISO date strings to Date objects.
   ✨ Show Answer

   a9.js

   const isISO = s => typeof s === "string" && /^\d{4}-\d\d-\d\dT/.test(s);
   const revive = (k, v) => isISO(v) ? new Date(v) : v;
   const j = '{"created":"2026-05-09T10:00:00Z"}';
   console.log(JSON.parse(j, revive));

   Run Copy

10. Use AbortController to cancel a slow fetch (sketch).
    ✨ Show Answer

    const ctrl = new AbortController();
    setTimeout(() => ctrl.abort(), 3000);
    fetch("/slow", { signal: ctrl.signal })
        .catch(e => e.name === "AbortError" && console.log("cancelled"));

11. Why is JSON not enough to serialise Date, Map, BigInt?
    ✨ Show Answer

    Answer: JSON is a JS-subset format with only the six basic types (object, array, string, number, boolean, null). Dates serialise as ISO strings (one-way), Map and Set serialise as {}, BigInt throws. Use replacer/reviver to convert manually, or pick a richer format like structuredClone for in-memory work.

12. Construct a URL with new URL and add query params.
    ✨ Show Answer

    a12.js

    const u = new URL("https://abcl.tech/search");
    u.searchParams.set("q", "javascript bangla");
    u.searchParams.set("page", 2);
    console.log(u.toString());

    Run Copy

13. Build a fetch+timeout helper using Promise.race.
    ✨ Show Answer

    a13.js

    const withTimeout = (p, ms) => Promise.race([
        p,
        new Promise((_, r) => setTimeout(() => r(new Error("timeout")), ms))
    ]);
    withTimeout(new Promise(r => setTimeout(() => r("slow"), 100)), 30)
        .catch(e => console.log(e.message));

    Run Copy

14. In one paragraph, what is CORS and why can't your JS bypass it?
    ✨ Show Answer

    Answer: CORS is the browser's same-origin protection: scripts can read responses from a different origin only if that origin opts in via Access-Control-Allow-Origin. The browser enforces this in C++ before your JS sees the response, so no fetch options or polyfill can override it. To talk to a third-party API that doesn't enable CORS, route the call through your own server.