JSON w JavaScript: JSON.stringify, JSON.parse i typowe pułapki

JSON to tekst, a nie obiekt

JSON (JavaScript Object Notation) to format tekstowy do wymiany danych. Wygląda jak literał obiektu JavaScript, ale jest stringiem, czyli ciągiem znaków, który możesz wysłać przez sieć, zapisać do pliku albo wkleić do konfiguracji.

// A JavaScript object - a live value in memory.
const user = { name: "Rosa", age: 30 };

// JSON - a string of text that represents the same data.
const json = '{"name":"Rosa","age":30}';

Łatwo je pomylić, bo wyglądają podobnie. Model myślowy, który pomaga je rozróżniać: obiekty żyją w twoim programie, a JSON to ich postać w drodze na zewnątrz. Zamieniasz jedno na drugie dwiema funkcjami: JSON.stringify (obiekt → string) i JSON.parse (string → obiekt).

JSON.stringify: z obiektu na string

Zamień dowolną wartość JavaScript na jej reprezentację JSON:

const user = {
  name: "Rosa",
  age: 30,
  isAdmin: false,
  tags: ["editor", "admin"],
};

const json = JSON.stringify(user);
console.log(json);
console.log(typeof json);

Wynik to jednoliniowy string bez spacji: zwarty, idealny do przesyłania przez sieć. Sprawdzenie typeof to potwierdza: string, a nie object.

Dla czytelności podczas debugowania przekaż dwa dodatkowe argumenty. Drugi to replacer (za chwilę do niego dojdziemy), a przekazanie null oznacza „uwzględnij wszystko”. Trzeci to wcięcie:

const user = {
  name: "Rosa",
  age: 30,
  tags: ["editor", "admin"],
};

console.log(JSON.stringify(user, null, 2));

To standardowa forma ładnego formatowania. Używaj 2 lub 4 spacji, tak jak robi to większość narzędzi.

JSON.parse: ze stringa na obiekt

Operacja odwrotna: bierzesz string JSON i dostajesz z powrotem wartość JavaScript.

const json = '{"name":"Rosa","age":30,"tags":["editor","admin"]}';

const user = JSON.parse(json);
console.log(user.name);
console.log(user.tags[0]);
console.log(typeof user);

Po sparsowaniu masz do czynienia ze zwykłym obiektem: dostęp przez kropkę, przez nawiasy kwadratowe, metody tablicowe i cała reszta.

JSON.parse jest wybredny. Wszystkie poniższe wywołania rzucają SyntaxError:

JSON.parse("{name: 'Rosa'}");      // unquoted key, single quotes
JSON.parse('{"name": "Rosa",}');   // trailing comma
JSON.parse("// a comment\n{}");    // comments aren't allowed
JSON.parse("");                    // empty string

Zawsze gdy dane przychodzą spoza twojego programu, czyli z odpowiedzi fetch, z pliku czy od użytkownika, owiń parsowanie w try/catch:

function safeParse(text) {
  try {
    return JSON.parse(text);
  } catch (err) {
    console.log("Invalid JSON:", err.message);
    return null;
  }
}

console.log(safeParse('{"ok":true}'));
console.log(safeParse("{ not valid }"));

Wartości, które nie przetrwają podróży w obie strony

JSON obsługuje sześć typów wartości: stringi, liczby, wartości logiczne, null, tablice i zwykłe obiekty. Wszystko inne w JavaScript zostaje usunięte, przekształcone albo powoduje błąd.

const weird = {
  name: "Rosa",
  greet: function () { return "hi"; },   // functions dropped
  missing: undefined,                     // undefined dropped
  when: new Date("2026-01-15"),           // Date → ISO string
  big: 10n,                               // BigInt throws!
};

// Remove `big` to see the rest:
delete weird.big;
console.log(JSON.stringify(weird, null, 2));

Co się dzieje:

• Funkcje i undefined są po cichu usuwane z obiektów. W tablicach stają się null, bo tablice w JSON nie mogą mieć dziur.
• Obiekty Date są serializowane do stringa ISO przez ich metodę toJSON. Parsowanie oddaje ci string, a nie Date.
• BigInt rzuca TypeError. Liczby w JSON nie mają odpowiednika.
• Map, Set i odwołania cykliczne też nie działają od razu.

Problem z odtwarzaniem Date rozwiązuje funkcja reviver w JSON.parse:

const json = '{"name":"Rosa","joined":"2026-01-15T10:30:00.000Z"}';

const isoDate = /^\d{4}-\d{2}-\d{2}T/;
const user = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && isoDate.test(value)) {
    return new Date(value);
  }
  return value;
});

console.log(user.joined instanceof Date);
console.log(user.joined.getFullYear());

Reviver uruchamia się dla każdej pary klucz/wartość i pozwala przekształcać wartości podczas wczytywania.

Replacer: filtrowanie tego, co trafia do JSON

Drugi argument JSON.stringify pozwala kontrolować, co znajdzie się w wyniku. Przekaż tablicę kluczy, żeby dopuścić tylko je:

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3...",
  age: 30,
};

// Only include safe fields.
const safe = JSON.stringify(user, ["name", "age"], 2);
console.log(safe);

Albo przekaż funkcję z dowolną logiką: usuwaj pola, maskuj wartości, przekształcaj je w locie:

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3d4e5f6",
};

const masked = JSON.stringify(user, (key, value) => {
  if (key === "passwordHash") return undefined;       // drop the field
  if (key === "email") return value.replace(/(?<=.).(?=.*@)/g, "*");
  return value;
}, 2);

console.log(masked);

Zwrócenie undefined usuwa klucz. Zwrócenie dowolnej innej wartości go zastępuje.

Dostosowywanie przez toJSON

Jeśli obiekt ma metodę toJSON, JSON.stringify ją wywołuje i serializuje zwróconą wartość. W ten sposób Date kontroluje własny format i ty możesz użyć tego samego mechanizmu:

class User {
  constructor(name, passwordHash) {
    this.name = name;
    this.passwordHash = passwordHash;
  }
  toJSON() {
    // Nigdy nie ujawniaj hasha.
    return { name: this.name };
  }
}

const rosa = new User("Rosa", "a1b2c3");
console.log(JSON.stringify(rosa));

Świetne dla klas, które chcą mieć spójny publiczny kształt, niezależnie od tego, kto je serializuje.

Głęboka kopia (stary trik i lepszy sposób)

Przez lata JSON.parse(JSON.stringify(obj)) było jednolinijkowcem do głębokiego kopiowania zwykłego obiektu:

const original = { user: { name: "Rosa", tags: ["admin"] } };
const copy = JSON.parse(JSON.stringify(original));

copy.user.tags.push("editor");
console.log(original.user.tags);   // unchanged
console.log(copy.user.tags);

To działa, dopóki obiekt zawiera tylko wartości bezpieczne dla JSON. Daty, mapy i funkcje to psują (zobacz problemy opisane wyżej).

Nowoczesny JavaScript ma structuredClone, który obsługuje daty, Map, Set, tablice typowane i odwołania cykliczne:

const original = {
  user: { name: "Rosa" },
  joined: new Date(),
  tags: new Set(["admin"]),
};

const copy = structuredClone(original);
console.log(copy.joined instanceof Date);
console.log(copy.tags instanceof Set);

Sięgaj po structuredClone, kiedy tylko możesz. Trik JSON.parse(JSON.stringify(...)) zachowaj na szybkie, prowizoryczne kopie prostych danych.

Realistyczny przykład: pobieranie i parsowanie

Najczęściej zetkniesz się z JSON przy HTTP. fetch nie parsuje za ciebie JSON: wywołujesz .json() na odpowiedzi (co w praktyce jest JSON.parse na treści odpowiedzi):

async function loadUser(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const user = await res.json();
  return user;
}

loadUser(1).then((user) => {
  console.log(user.name, "-", user.email);
});

Wysyłanie JSON to operacja odwrotna: przepuść treść przez JSON.stringify i ustaw nagłówek Content-Type.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Te dwa wzorce pokrywają zdecydowaną większość pracy z JSON w prawdziwych projektach.

Dalej: optional chaining

Sparsowany JSON często ma opcjonalne pola: user.address.city, które może nie istnieć, albo response.data.items, którego może brakować. Bezpieczny dostęp do głęboko zagnieżdżonych właściwości bez wysypywania programu zapewnia optional chaining (?.) i o nim jest następna strona.