Przejdź do głównej zawartości

32. JSON — format, parsowanie, stringify i użycie w React

JSON — lingua franca danych webowych

JSON (JavaScript Object Notation) to tekstowy format wymiany danych. Lekki, czytelny dla ludzi, łatwy do parsowania przez maszyny. Standard wymiany danych w REST API. JavaScript ma wbudowane JSON.parse() i JSON.stringify() do konwersji.

Każde REST API zwraca JSON. Każdy fetch().then(r => r.json()) parsuje JSON. localStorage wymaga JSON.stringify/parse. JSON jest wszędzie w web developmencie.

  1. Opisać format JSON — typy danych, struktura, różnice od obiektów JS
  2. Wyjaśnić JSON.parse() i JSON.stringify() z obsługą błędów
  3. Pokazać typowe użycie w React: fetch + parse + state
  4. Omówić ograniczenia JSON (undefined, functions, circular references)
  1. Format JSON — string, number, boolean, null, array, object — bez undefined i funkcji
  2. JSON.parse() — string → JS object, SyntaxError przy invalid JSON
  3. JSON.stringify() — JS object → string, replacer, space
  4. W React — fetch → response.json() → setState
  5. Ograniczenia — undefined staje się null, funkcje są pomijane

Przykład 1

fetch() + response.json() — standardowy przepływ danych z API.

Przykład 2

localStorage.setItem z JSON.stringify, getItem z JSON.parse.

Przykład 3

JSON.stringify z replacer i space dla czytelnego outputu (debugging).

  1. Wstęp — wymiana danych w web
  2. Rozdział 1: Format JSON — składnia, typy danych
  3. Rozdział 2: parse i stringify — konwersja, błędy
  4. Rozdział 3: JSON w React — API, localStorage
  5. Podsumowanie
  6. Bibliografia

JSON jest językiem API!

Pokaż przykład surowej odpowiedzi API (JSON string w DevTools Network) i jak wygląda po JSON.parse (obiekt JS). Ta transformacja jest kluczowa.