Hur du parsar JSON i JavaScript

Att parsa JSON i JavaScript är något du kommer göra hundratals gånger som webbutvecklare. Lyckligtvis har JavaScript inbyggt stöd för det — inga bibliotek behövs. Men det finns fler nyanser kring JSON.parse() och JSON.stringify() än vad dokumentationen avslöjar. Låt oss gå igenom det ordentligt.

JSON.parse() — göra om en sträng till ett objekt

JSON.parse() tar en JSON-formaterad sträng och konverterar den till ett JavaScript-värde. Det värdet är vanligtvis ett objekt eller en array, men det kan också vara en sträng, ett tal, ett booleskt värde 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"

Notera att indata måste vara en sträng. Ett vanligt misstag är att försöka parsa ett värde som redan är ett objekt — JSON.parse({}) kastar ett SyntaxError eftersom det konverterar objektet till "[object Object]" först, vilket inte är giltig JSON.

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

Det här är något ingen berättar för dig: JSON.parse() kastar ett SyntaxError om indata är ogiltig JSON. Om du parsar data från ett API, användarinput eller en fil bör du alltid hantera det felet. Ett enda felformat svar kan krascha din app om du inte gö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"

Jag använder en wrapper som den här i nästan varje projekt. Den gör felhanteringen konsekvent och förhindrar fula oupptäckta undantag från att bubbla upp till ditt UI.

JSON.stringify() — göra om ett objekt till en sträng

JSON.stringify() gör det omvända: den konverterar ett JavaScript-värde till en JSON-sträng. Du använder detta när du skickar data till ett API, sparar till localStorage eller skriver till 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 till JSON.stringify() är indragsnivån. Att använda 2 eller 4 ger läsbar utmatning. Standardinställningen (inget tredje argument) ger kompakt, minifierad JSON — bättre för nätverksöverföring.

Vad stringify() tyst utelämnar

Det här biter utvecklare regelbundet. JSON.stringify() utelämnar tyst vissa värden eftersom JSON inte stöder 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

Hämta JSON från ett API — det verkliga mönstret

I praktiken sker de flesta JSON-parsningar när du hämtar data från ett API. Fetch API gör det enkelt — response.json() hanterar parsningen åt dig:

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() är i princip JSON.parse(await response.text()). Det kastar också om svarets kropp inte är giltig JSON, så det är värt att fånga det separat i produktionskod.

Jobba med nästlad JSON-data

Djupt nästlad JSON är vanligt i verkliga API:er. Så här navigerar du den säkert utan att krascha på saknade nycklar:

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 (?.) och nullish coalescing (??) är moderna JavaScript-funktioner — båda en del av ECMAScript-specifikationen sedan 2020 — som gör det mycket säkrare att jobba med osäkra JSON-strukturer. Använd dem fritt — de stöds i alla moderna webbläsare och Node.js 14+.

Funktionerna replacer och reviver

Både JSON.stringify() och JSON.parse() accepterar ett andra argument som låter dig anpassa transformationen. De är genuint användbara i verkliga 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önstret är särskilt användbart för att återställa Date-objekt efter en tur-och-retur genom JSON, eftersom JSON inte har en inbyggd datumtyp.

Användbara verktyg

När du jobbar med JSON i JavaScript-projekt sparar dessa verktyg tid: JSON Formatter för att pretty-printa minifierade API-svar, JSON Validator för att kontrollera syntaxfel, JSON Path för att fråga specifika fält från stora payloads, och JSON Escape när du behöver bädda in JSON i en sträng. För mer djup är MDN JSON-referensen utmärkt.

Avslutningsvis

JSON.parse() och JSON.stringify() är de två funktioner du behöver. Nyckelvanorna att bygga: omslut alltid parse() i try/catch, använd optional chaining för nästlad åtkomst, och vet vad stringify() tyst utelämnar. Bemästra de tre och du hanterar 99% av verkliga JSON-scenarier utan överraskningar.