JSON ב-JavaScript: JSON.stringify, JSON.parse ומלכודות נפוצות

JSON הוא טקסט, לא אובייקט

JSON (JavaScript Object Notation) הוא פורמט טקסט להעברת נתונים. הוא נראה כמו ליטרל אובייקט של JavaScript, אבל הוא מחרוזת: רצף תווים שאפשר לשלוח ברשת, לשמור בקובץ או להדביק בקובץ הגדרות.

// 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}';

קל לבלבל ביניהם כי הם נראים דומה. מודל החשיבה שמסדר את הראש: אובייקטים חיים בתוך התוכנית שלכם, ו-JSON הוא איך שהם נראים כשהם יוצאים החוצה. ממירים ביניהם בעזרת שתי פונקציות: JSON.stringify (אובייקט → מחרוזת) ו-JSON.parse (מחרוזת → אובייקט).

JSON.stringify: מאובייקט למחרוזת

הופכים כל ערך של JavaScript לייצוג ה-JSON שלו:

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

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

התוצאה היא מחרוזת בשורה אחת בלי רווחים: קומפקטית ואידיאלית לשליחה ברשת. בדיקת ה-typeof מאשרת: string, לא object.

בשביל קריאוּת בזמן דיבוג, העבירו שני ארגומנטים נוספים. השני הוא replacer (נגיע אליו), והעברה של null פירושה "לכלול הכול". השלישי הוא ההזחה:

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

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

זו הצורה המקובלת להדפסה מעוצבת. השתמשו ב-2 או 4 רווחים, כמו שרוב הכלים מייצרים.

JSON.parse: ממחרוזת לאובייקט

הכיוון ההפוך: לוקחים מחרוזת JSON ומקבלים בחזרה ערך של 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);

אחרי הפענוח עובדים עם אובייקט רגיל: גישה עם נקודה, גישה עם סוגריים מרובעים, מתודות מערך, כל הסיפור.

JSON.parse בררנית. כל אלה זורקים 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

בכל פעם שהקלט מגיע מ_מחוץ_ לתוכנית שלכם, כמו תשובה של fetch, קובץ או קלט של משתמש, עטפו את הפענוח ב-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 }"));

ערכים שלא שורדים את הדרך הלוך ושוב

JSON תומך בשישה סוגי ערכים: מחרוזות, מספרים, בוליאניים, null, מערכים ואובייקטים רגילים. כל השאר ב-JavaScript מושמט, משתנה או נשבר.

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));

מה קורה:

• פונקציות ו-undefined מוסרים בשקט מאובייקטים. בתוך מערכים הם הופכים ל-null, כי במערכי JSON אין חורים.
• אובייקטי Date מומרים למחרוזת ISO דרך המתודה toJSON שלהם. הפענוח מחזיר את המחרוזת, לא Date.
• BigInt זורק TypeError. למספרי JSON אין מקבילה לו.
• גם Map, Set והפניות מעגליות לא עובדים ישירות.

הפתרון להעברת Date הלוך ושוב הוא פונקציית ה-reviver של 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 רץ על כל זוג מפתח וערך ומאפשר לשנות ערכים בדרך פנימה.

ה-Replacer: סינון של מה שעובר המרה

הארגומנט השני של JSON.stringify מאפשר לשלוט במה שמגיע לפלט. העבירו מערך של מפתחות כדי לכלול רק אותם:

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);

או העבירו פונקציה ללוגיקה חופשית: השמטת שדות, הסתרת ערכים, שינוי תוך כדי תנועה:

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);

החזרת undefined מסירה את המפתח. החזרת כל ערך אחר מחליפה אותו.

התאמה אישית עם toJSON

אם לאובייקט יש מתודת toJSON, JSON.stringify קוראת לה וממירה את ערך ההחזרה במקום את האובייקט. כך Date שולט בפורמט שלו, ואפשר להשתמש באותו מנגנון:

class User {
  constructor(name, passwordHash) {
    this.name = name;
    this.passwordHash = passwordHash;
  }
  toJSON() {
    // לעולם לא לחשוף את ה-hash.
    return { name: this.name };
  }
}

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

מצוין למחלקות שרוצות צורה ציבורית עקבית, לא משנה מי ממיר אותן.

העתקה עמוקה (הטריק הישן, והטוב יותר)

במשך שנים, JSON.parse(JSON.stringify(obj)) היה השורה האחת להעתקה עמוקה של אובייקט רגיל:

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);

זה עובד, כל עוד האובייקט מכיל רק ערכים שבטוחים ל-JSON. Dates, Maps ופונקציות שוברים את זה (ראו את בעיות הדרך הלוך ושוב שלמעלה).

ב-JavaScript מודרנית יש structuredClone, שמטפלת ב-Dates, Maps, Sets, typed arrays והפניות מעגליות:

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);

השתמשו ב-structuredClone כשאפשר. שמרו את הטריק JSON.parse(JSON.stringify(...)) בכיס להעתקות מהירות של נתונים פשוטים.

דוגמה מהמציאות: הבאה ופענוח

המקום הנפוץ ביותר שבו תיגעו ב-JSON הוא HTTP. fetch לא מפענחת JSON בשבילכם: קוראים ל-.json() על התשובה (שבפועל היא JSON.parse על גוף התשובה):

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);
});

שליחת JSON היא הכיוון ההפוך: JSON.stringify על הגוף והגדרת הכותרת Content-Type.

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

שתי התבניות האלה מכסות את רוב העבודה עם JSON בעולם האמיתי.

הבא בתור: Optional Chaining

ב-JSON שפוענח יש לעתים קרובות שדות אופציונליים: user.address.city שאולי לא קיים, response.data.items שעלול לחסור. גישה למאפיינים מקוננים לעומק בלי לקרוס היא בדיוק התפקיד של optional chaining (?.), וזה העמוד הבא.