עברית
לעצב, לאמת ולחקור JSON עם תצוגת עץ חיה.
עודכן לאחרונה
ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.
JSON formatter (נקרא גם JSON beautifier או pretty-printer) לוקח JSON דחוס או מבולגן והופך אותו לנתונים קריאים עם הזחות. זה אחד מכלי הפיתוח שהכי הרבה משתמשים בהם: לבדיקת תגובות API, לקריאת קובצי הגדרות, לניפוי באגים בלוגים, להשוואת נתוני בדיקה ולהעברת נתונים בין קוד frontend לקוד backend.
JSON הוא פורמט קפדני: מפתחות חייבים להיות במירכאות כפולות, מחרוזות חייבות להיות במירכאות כפולות, פסיקים חייבים להיות במקום הנכון, וכל { או [ שנפתח חייב להיסגר. Formatter הופך את המבנה הזה לגלוי, ו-validator מובנה אומר לכם בדיוק איפה התחביר נשבר, אם הוא נשבר.
JSON הוא ראשי תיבות של JavaScript Object Notation. למרות שהוא צמח מתוך JavaScript, כמעט לכל שפת תכנות יש תמיכה מובנית בקריאה וכתיבה של JSON, ולכן הוא הפך לדרך ברירת המחדל להעברת נתונים מובנים ברשת.
{} לשדות עם שם, מערכים משתמשים ב-[] לרשימות מסודרות, ואפשר לקנן אותם זה בתוך זה לכל עומק.null, אובייקט ומערך. אין undefined, אין פונקציות ואין הערות.העתיקו את ה-JSON מתגובת ה-API, מקובץ הלוג או מקובץ ההגדרות והדביקו אותו בתיבת הקלט. ה-formatter מקבל גם קלט מכווץ וגם קלט שמעוצב חלקית.
שני רווחים הם הסגנון הנפוץ ביותר, וארבעה רווחים נפוצים גם כן. בחרו את מה שמתאים לסגנון הקיים בפרויקט שלכם.
אם ה-JSON תקין, הפלט המעוצב מופיע בחלונית הפלט. אם לא, הודעת השגיאה אומרת לכם את השורה והתו שבהם הפענוח נכשל.
השתמשו בעץ המתקפל כדי לקפל אובייקטים ומערכים מקוננים לעומק. זו הדרך המהירה ביותר להבין את המבנה של תגובת API לא מוכרת.
העתיקו את הגרסה המעוצבת לקוד או לתיעוד שלכם, או כווצו אותה בחזרה לשורה אחת לאחסון ולהעברה ברשת.
כל אבני הבניין של JSON. כל מה שלא ברשימה הזו הוא לא JSON תקין. המפרט: RFC 8259 ו-ECMA-404.
| Token | משמעות | דוגמה |
|---|---|---|
{ } | אובייקט: אוסף של זוגות מפתח/ערך | {"name": "Maya"} |
[ ] | מערך: רשימה מסודרת של ערכים | [1, 2, 3] |
"..." | מחרוזת: תמיד עטופה במירכאות כפולות | "hello" |
| מספר | שלם או עשרוני, בלי מירכאות, בלי + בהתחלה | 42, -3.14 |
true / false | ערכים בוליאניים, באותיות קטנות | true |
null | ערך ריק / חסר | null |
: | מפריד בין מפתח לערך שלו | "id": 7 |
, | מפריד בין פריטים, אף פעם לא בסוף | [1, 2, 3] |
{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}{ "user": { "id": 7, "name": "Maya" }, "skills": ["HTML", "JavaScript"]}אחרי העיצוב, האובייקט המקונן user והמערך skills הרבה יותר קלים לסריקה. הנתונים זהים, רק הרווחים משתנים.
{ "name": "Coddy", "active": true,}JSON לא מאפשר פסיק אחרי המאפיין האחרון. ה-validator יסמן את ה-} הסוגר. זו אחת הטעויות הנפוצות ביותר כשמעתיקים תחביר של אובייקט JavaScript ל-JSON.
{ "count": 3, "countText": "3", "enabled": true}3 הוא מספר, "3" הוא מחרוזת ו-true הוא בוליאני: שלושה סוגי JSON שונים. API נכשלים הרבה פעמים כשהמבנה נכון אבל סוג של ערך שגוי.
{ "data": { "orders": [ { "id": 101, "items": [{ "sku": "A", "qty": 2 }] }, { "id": 102, "items": [] } ] }}השתמשו בתצוגת העץ כדי לקפל את data.orders ולחשוף את המבנה רמה אחרי רמה. מערכים מקוננים של אובייקטים הם הדפוס הנפוץ ביותר בתגובות REST.
undefined לא תקינים ב-JSON, ופסיקים בסוף ייכשלו בפענוח.+, לא יכולים להתחיל באפסים (חוץ מ-0 עצמו), ולא יכולים להיות עטופים במירכאות אם אתם באמת רוצים סוג מספר.null נשארים בדיוק אותו דבר. כיווץ בחזרה ישחזר את הצורה המקורית שנוחה להעברה ברשת.undefined אסורים.package.json, tsconfig.json), מטא-דאטה של חבילות, שורות לוג, local storage של הדפדפן ונתוני בדיקה.