Hvordan parse JSON i JavaScript

Å parse JSON i JavaScript er noe du vil gjøre hundrevis av ganger som webutvikler. Heldigvis har JavaScript innebygd støtte for det — ingen biblioteker trengs. Men det er mer nyanse i JSON.parse() og JSON.stringify() enn dokumentasjonen avslører. La oss gå gjennom det skikkelig.

JSON.parse() — gjøre en streng om til et objekt

JSON.parse() tar en JSON-formatert streng og konverterer den til en JavaScript-verdi. Den verdien er vanligvis et objekt eller en array, men det kan også være en streng, et tall, en boolsk verdi eller null:

const jsonString = '{"name": "Alice", "age": 30, "active": true}';
const user = JSON.parse(jsonString);

console.log(user.name);    // "Alice"
console.log(user.age);     // 30
console.log(user.active);  // true
console.log(typeof user);  // "object"

Legg merke til at inndata må være en streng. En vanlig feil er å prøve å parse en verdi som allerede er et objekt — JSON.parse({}) kaster en SyntaxError fordi det konverterer objektet til "[object Object]" først, noe som ikke er gyldig JSON.

Omslut alltid JSON.parse() i en try/catch

Det her er noe ingen forteller deg: JSON.parse() kaster en SyntaxError hvis inndata er ugyldig JSON. Hvis du parser data fra et API, brukerinput eller en fil, bør du alltid håndtere den feilen. Et enkelt feilformatert svar kan krasje appen din hvis du ikke gjør det:

function safeParseJSON(str) {
  try {
    return { data: JSON.parse(str), error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}

const { data, error } = safeParseJSON('{"name": "Alice"}');
if (error) {
  console.error('Invalid JSON:', error);
} else {
  console.log(data.name); // "Alice"
}

// Handles bad input gracefully
const result = safeParseJSON('not json at all');
console.log(result.error); // "Unexpected token 'o', "not json "... is not valid JSON"

Jeg bruker en wrapper som denne i nesten hvert prosjekt. Det gjør feilhåndteringen konsistent og hindrer stygge ukatchede unntak fra å boble opp til UI-et ditt.

JSON.stringify() — gjøre et objekt om til en streng

JSON.stringify() gjør det omvendte: den konverterer en JavaScript-verdi til en JSON-streng. Du bruker dette når du sender data til et API, lagrer til localStorage eller skriver til en fil:

const user = {
  name: "Bob",
  age: 25,
  roles: ["admin", "editor"],
  password: "secret123" // we'll handle this later
};

// Basic usage
const jsonString = JSON.stringify(user);
// '{"name":"Bob","age":25,"roles":["admin","editor"],"password":"secret123"}'

// Pretty-printed (great for logs and file output)
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);
// {
//   "name": "Bob",
//   "age": 25,
//   "roles": ["admin", "editor"],
//   "password": "secret123"
// }

Det tredje argumentet til JSON.stringify() er innrykknivået. Å bruke 2 eller 4 gir deg lesbar utdata. Standardinnstillingen (intet tredje argument) gir deg kompakt, minifisert JSON — bedre for nettverksoverføring.

Hva stringify() stille utelater

Dette biter utviklere jevnlig. JSON.stringify() utelater stille visse verdier fordi JSON ikke støtter dem:

const data = {
  name: "Alice",
  greet: function() { return "hi"; },   // Functions → dropped
  undef: undefined,                      // undefined → dropped
  sym: Symbol("key"),                    // Symbols → dropped
  nan: NaN,                              // NaN → null
  inf: Infinity,                         // Infinity → null
  date: new Date("2024-01-15")           // Dates → ISO string
};

console.log(JSON.stringify(data, null, 2));
// {
//   "name": "Alice",
//   "nan": null,
//   "inf": null,
//   "date": "2024-01-15T00:00:00.000Z"
// }
// greet, undef, sym are GONE

Hente JSON fra et API — det virkelige mønsteret

I praksis skjer de fleste JSON-parsinger når du henter data fra et API. Fetch API gjør dette enkelt — response.json() håndterer parsingen for deg:

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const user = await response.json(); // parses JSON automatically
    return user;
  } catch (err) {
    console.error('Failed to fetch user:', err);
    return null;
  }
}

const user = await getUser(42);
if (user) {
  console.log(`Hello, ${user.name}!`);
}

response.json() er i bunn og grunn JSON.parse(await response.text()). Det kaster også hvis svarlegemet ikke er gyldig JSON, så det er verdt å fange det separat i produksjonskode.

Jobbe med nestede JSON-data

Dypt nestede JSON er vanlig i ekte API-er. Slik navigerer du det trygt uten å krasje på manglende nøkler:

const apiResponse = {
  "user": {
    "profile": {
      "address": {
        "city": "Berlin"
      }
    }
  }
};

// Unsafe — throws if any level is undefined
const city1 = apiResponse.user.profile.address.city; // "Berlin"

// Safe with optional chaining (ES2020+) — returns undefined instead of throwing
const city2 = apiResponse?.user?.profile?.address?.city; // "Berlin"
const zip   = apiResponse?.user?.profile?.address?.zip;  // undefined (not a crash)

// With a fallback using nullish coalescing
const country = apiResponse?.user?.profile?.address?.country ?? "Unknown";

Optional chaining (?.) og nullish coalescing (??) er moderne JavaScript-funksjoner — begge del av ECMAScript-spesifikasjonen siden 2020 — som gjør det mye tryggere å jobbe med usikre JSON-strukturer. Bruk dem fritt — de støttes i alle moderne nettlesere og Node.js 14+.

Funksjonene replacer og reviver

Både JSON.stringify() og JSON.parse() aksepterer et andre argument som lar deg tilpasse transformasjonen. De er genuint nyttige for virkelige scenarier:

// replacer: filter or transform values during stringify
const user = { name: "Alice", password: "s3cr3t", age: 30 };
const safe = JSON.stringify(user, ["name", "age"]); // only include these keys
// '{"name":"Alice","age":30}'  — password is excluded

// reviver: transform values during parse
const dateJson = '{"name": "Alice", "createdAt": "2024-01-15T09:30:00Z"}';
const parsed = JSON.parse(dateJson, (key, value) => {
  if (key === "createdAt") return new Date(value); // convert string to Date
  return value;
});
console.log(parsed.createdAt instanceof Date); // true
console.log(parsed.createdAt.getFullYear());   // 2024

Reviver-mønsteret er særlig nyttig for å gjenopprette Date-objekter etter en tur-retur gjennom JSON, siden JSON ikke har en innebygd datotype.

Nyttige verktøy

Når du jobber med JSON i JavaScript-prosjekter sparer disse verktøyene tid: JSON Formatter for å pretty-printe minifiserte API-svar, JSON Validator for å kontrollere syntaksfeil, JSON Path for å spørre etter spesifikke felt fra store payloads, og JSON Escape når du trenger å bygge JSON inn i en streng. For mer dybde er MDN JSON-referansen utmerket.

Oppsummering

JSON.parse() og JSON.stringify() er de to funksjonene du trenger. De viktigste vanene å bygge: omslut alltid parse() i try/catch, bruk optional chaining for nestet tilgang, og vit hva stringify() stille utelater. Få de tre på plass og du håndterer 99 % av virkelige JSON-scenarier uten overraskelser.