This translation is incomplete. Please help translate this article from English.

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

ידע מוקדם: Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see First steps and Building blocks) and OOJS basics (see Introduction to objects).
מטרה: להבין כיצד לעבוד עם מידע המאוחסן בתוך JSON וכיצד ליצור אובייקטי JSON בעצמנו.

מה זה JSON?

JSON הוא פורמט מידע מבוסס-טקסט אשר דומה לסינטקס של אובייקט ב-JavaScript. פורמט זה הוצג על ידי Douglas Crockford. למרות שהוא מאוד דומה ומזכיר סינטקס של object literal ב-JavaScript, ניתן להשתמש בו באופן עצמאי ולא רק ב-JavaScript, וסביבות פיתוח אחרות מכילות אפשרויות לקרוא או לעבד וכן ליצור JSON. 

JSON מתקיים כמחרוזת - שימושי מאוד כשאנחנו רוצים להעביר מידע ברשת. הוא צריך להיות מומר לאובייקט JavaScript כאשר אנחנו רוצים לגשת לאותו מידע שמאוחסן בתוך ה-JSON. זה לא מורכב או מסובך - JavaScript מעניקה לנו את האובייקט JSON הגלובלי שיש לו מתודות שזמינות עבורו בעבור המרה בין JSON למחרוזת.

לתשומת לב: המרה של מחרוזת לאובייקט נקראת parsing ואילו המרה של אובייקט למחרזות כך שהוא יוכל להיות מועבר ברשת, נקראת stringification.

אובייקט JSON יכול להיות מאוחסן בתוך קובץ נפרד משלו, שהוא בעצם קובץ טקסט עם סיימות של .json ו-MIME type של application/json.

המבנה של JSON

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

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

אם אנחנו נטען את האובייקט הזה לתוך תוכנית JavaScript ונמיר אותו (parse) בתוך משתנה בשם superHeroes לדוגמא, אנחנו אז נוכל לגשת לאותו מידע המאוחסן בו באמצעות שימוש ב-00000 שאנחנו מכירים מהמאמר בנושא אובייקטים - עקרונות יסוד. לדוגמא: 

superHeroes.homeTown
superHeroes['active']

על מנת לגשת למידע בהמשך ההיררכיה, אנחנו פשוט נצטרך ״לקשור״ את שם הפרופ׳ המבוקש והאינדקס הרלוונטי במערך ביחד. לדוגמא, על מנת לגשת ל-9999 השלישי של ה-0000 השני ברשימת ה-9999, נוכל לרשום קוד כזה:

superHeroes['members'][1]['powers'][2]
  1. ראשית יש לנו את שם המשתנה  — superHeroes.
  2. בתוך המשתנה אנחנו רוצים לגשת לפרופ׳ members, אז אנחנו משתמשים ב- ["members"]
  3. members מכיל מערך של אובייקטים. אנחנו רוצים לגשת לאובייקט השני בתוך המערך אז אנחנו נשתמש באינדקס [1]
  4. בתוך האובייקט, אנחנו רוצים לגשת לפרופ׳ powers, אז אנחנו נשתמש ב-["powers"]
  5. ובתוך הפרופ׳ powers, אנחנו נרצה את הערך השלישי, אז אנחנו נשתמש ב-[2]

לתשומת לב: יצרנו את ה-JSON שבדוגמא למעלה בקובץ JSONTest.html וניתן לראותו גם ב-קוד המקור

מנסו להעלות את הקובץ ולגשת למידע בתוך המשתנה באמצעות הקונסולה בדפדפן. 

מערכים כ-JSON

למעלה ציינו שטקסט ב-JSON דומה בעקרון לאובייקט ב-JavaScript, וזה דיי נכון. הסיבה שאנחנו אומרים ״דומה״ ולא ״זהה״, מכיוון שמערך ב-JavaScript הוא בעצם JSON תקין:

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

הטקסט למעלה הוא JSON תקין לחלוטין. אנחנו פשוט נצטרך לגשת לאיברים במערך (בגרסה המעובדת שלו), באמצעות אינדקס של מערך/

הערות נוספות

  • JSON הוא פשוט פורמט מידע — הוא מכיל רק פרופ׳ ולא מתודות. 
  • JSON דורש גרשיים כפולות - ״ ״ - סביב מחרוזות ושמות של פרופ׳. גרשיים בודדות - ׳ ׳ - אינן תקינות. 
  • אפילו טעות כתיב קטנה כמו פסיק או נקודותיים לא במקום יכולה לגרום לקובץ JSON לשגיאה. צריך לשים לב ולעשות ולידציה לכל מידע שאנחנו נרצה להשתמש בו, למרות שהסיכויים שקובץ JSON שנוצר על ידי מחשב יכיל שגיאות הוא נמוך, אם התוכנה שיצרה אותו עובדת כמו שצריך. אנחנו יכולים לעשות ולידציה לקבצי JSON באמצעות יישומים כמו JSONLint
  • JSON גם יכול לקחת תבנית של כל סוג מידע שאפשר לכלול אותו ב-JSON, לא רק מערכים או אובייקטים. לדוגמא, מחרוזת בודדת או מספר הם אובייקטי JSON תקינים לחלוטין. 
  • שלא כמו בקוד JavaScript שבו פרופ׳ של אובייקטים אינם מחוייבים בגרשיים, ב-JSON, הפרופ׳ מחוייבים בגרשיים (וכפי שציינו למעלה, רק גרשיים כפולות).

למידה עצמאית: עבודה עם JSON

כעת נלמד באמצעות דוגמא כיצד ניתן לעשות שימוש במידע JSON באתר אינטרנט.

התחלה

על מנת להתחיל, עשו עותקים מקודמיים של heroes.html ושל style.css . הקובץ האחרון מכיל CSS פשוט לעיצוב הדף שלנו והראשון מכיל גוף HTML פשוט:

<header>
</header>

<section>
</section>

בנוסף, הקובץ הראשון מכיל אלמנט <script> פשוט שיכיל את קוד ה-JavaScript שנכתוב בתרגיל זה. כעת, קובץ זה מכיל שתי שורות, אשר מכילות הפניה לאלמנט <header> ולאלמנט <section> ומאחסן הפניות אלו בתוך משתנים:

var header = document.querySelector('header');
var section = document.querySelector('section');

מידע ה-JSON זמין ב-GitHub בכתובת: https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

בתרגיל אנחנו נעלה את המידע לתוך הדף שלנו, באמצעות שימוש במניפולציות על ה-DOM, כך שהדף שלנו ייראה כך:

קבלת ה-JSON

על מנת להשיג את ה-JSON, אנחנו נשתמש ב-API שנקרא XMLHttpRequest (לרוב נקרא XHR). זהו אובייקט JavaScript שימושי מאוד, אשר מאפשר לנו לבצע בקשות רשת על מנת לקבל משאבים מהשרת באמצעות JavaScript (כמו תמונות, טקסט, JSON, ואפילו קוד HTML), כלומר, אנחנו יכולים לעדכן חלקים מתוך התוכן שלנו, מבלי לטעון מחדש את הדף כולו. אפשרות זו איפשה לדפי אינטרנט להיות הרבה יותר רספונסיביים. אנחנו נלמד בהרחבה על נושא זה בהמשך. 

  1. על מנת להתחיל, אנחנו הולכים לאחסן את ה-URL של ה-JSON שאנחנו נרצה לקבל בתוך משתנה. הוסיפו את הקוד הבא בתחתית הקוד של JavaScript שברשותכם:
  2. var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
  3. על מנת ליצור בקשה, אנחנו צריכים ליצור אובייקט בקשה חדשה מה-constructor בשם XMLHttpRequest, באמצעות שימוש במילה השמורה new. הוסיפות את הקוד הבא מתחת לשורה האחרונה:
    var request = new XMLHttpRequest();
  4. כעת, אנחנו צריכים לפתוח בקשה חדשה לאובייקט בקשה שיצרנו באמצעות המתודה ()open. הוסיפו את הקוד הבא:
    request.open('GET', requestURL);

    מתודה זו מקבל לפחות שני פרמטרים - וניתן להזין עוד פרמטרים אופציונליים. הפרמטרים שאנחנו חייבים לציין בעבור הדוגמא הזו הם:

    • סוג המתודה של HTTP שאנחנו נרצה לבצע בבקשת השרת - במקרה שלנו זו תהיה GET, שכן אנחנו רוצים לקבל מידע כלשהו. 
    • ה-URL שאנחנו נבצע אליו בקשה - זהו ה-URL שבו מאוחסן קובץ ה-JSON שלנו. 
  5. כעת, הוסיפו את השורות הבאות  - בשורות אלו אנחנו מגדירים את ה-responseType ל-JSON, כך שה-XHR יודע שהשרת יחזיר לנו JSON, ושמאחורי הקלעים תבוצע לו המרה לאובייקט JavaScript. בשורה השנייה אנחנו שולחים את הבקשה באמצעות מתודת ()send:
    request.responseType = 'json';
    request.send();
  6. החלק האחרון של הקוד הרשום להלן הוא בעצם המתנה לקבלת תגובה מהשרת, וביצוע פעולה איתה. הוסיפו את הקוד הבא מתחת לקוד הנוכחי שלכם: 
    request.onload = function() {
      var superHeroes = request.response;
      populateHeader(superHeroes);
      showHeroes(superHeroes);
    }

כאן אנחנו מאחסנים את התגובה לבקשה לשלנו (הזמינה בפרופ׳ response ) בתוך משתנה שנקרא superHeroes. המשתנה עכשיו מכיל את האובייקט JavaScript שמבוסס על ה-JSON. לאחר מכן אנחנו מעבירים את אותו אובייקט כארגומנט לשתי קריאות פונקציות - הראשונה תמלא את ה-<header> עם המידע הנכון, ואילו השניה תיצור לנו כרטיס מידע בעבור כל ״גיבור״ בקבוצה ותכניס את הכרטיס הזה לתוך <section>

עטפנו את הקוד הזה בתוך מטפל אירוע - event handler - שירוץ ברגע שהאירוע load נוצר על האובייקט request (ראו onload) - זה מכיוון שהאירוע load נוצר כאשר התגובה מהשרת הוחזרה בהצלחה. ביצוע של דבר זה מבטיח לנו שה-request.response יהיה זמין בוודאות כשנרצה לעשות משהו איתו.

מילוי של מידע ב-header

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

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');
  myH1.textContent = jsonObj['squadName'];
  header.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
  header.appendChild(myPara);
}

אנחנו קראנו לפרמטר בשם jsonObj, על מנת להזכיר לעצמנו שזהו בעצם אובייקט JavaScript שמקורו ב-JSON. ראשית, יצרנו אלמנט <h1> עם ()createElement, והשמנו את ה-textContent שיהיה שווה לפרופ׳ squadName של האובייקט, ולאחר מכן שייכנו אותו ל-header באמצעות ()appendChild

לאחר מכן עשינו פעולה דומה בעבור הפסקה - p: יצרנו אותה, השמנו את ה-textContent שלה ולאחר מכן הוספנו אותה ל-header. ההבדל היחיד הוא שהטקסט שלה הוא שרשור של מחרוזות המכילות את הפרופ׳ homeTown ו-formed של האובייקט jsonObj.

יצירה של כרטיסי המידע ״hero״

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

function showHeroes(jsonObj) {
  var heroes = jsonObj['members'];
      
  for (var i = 0; i < heroes.length; i++) {
    var myArticle = document.createElement('article');
    var myH2 = document.createElement('h2');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');
    var myList = document.createElement('ul');

    myH2.textContent = heroes[i].name;
    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
    myPara2.textContent = 'Age: ' + heroes[i].age;
    myPara3.textContent = 'Superpowers:';
        
    var superPowers = heroes[i].powers;
    for (var j = 0; j < superPowers.length; j++) {
      var listItem = document.createElement('li');
      listItem.textContent = superPowers[j];
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}

לשם התחלה, אחסנו את הפרופ׳ members של אובייקט ה-JavaScript בתוך משתנה חדש. מערך זה מכיל מספר אובייקטים שמכילים את המידע בעבור כל hero. 

לאחר מכן, השתמשנו בלולאת for על מנת לעבור על כל אובייקט בתוך מערך זה. בעבור כל אובייקט במערך, עשינו את הדברים הבאים: 

  1. יצרנו מספר אלמנטים חדשים: <article><h2>, שלוש <p>, ו-<ul>.
  2. קבענו ש- <h2> יכיל את הערך הנוכחי של ה-name של ה-hero.
  3. מילאנו את שלושת ה-p עם secretIdentity, age ושורה עם הטקסט "Superpowers:".
  4. אחסנו את הפרופ׳ powers בתוך משתנה חדש שנקרא superPowers - זה מכיל מערך שמציג את ה-superpowers הנוכחיים.
  5. השתמשנו בלולאת for שוב על מנת לעבור על כל ה-superpowers הנוכחיים של hero - בעבור כל אחד יצרנו אלמנט <li>, והכנסו את ה-superpower לתוכו ולאחר מכן שמנו את ה-listItem בתוך <ul> באמצעות ()appendChild.
  6. לבסוף, שייכנו את <h2>, <p> ו-<ul> לתוך <article> (myArticle) ולאחר מכן שייכנו את <article> לתוך <section>. הסדר שבו דברים משוייכים הוא חשוב שכן כך הם יוצגו על גבי הדף.

לתשומת לב: אם אתם נתקלים בבבעיה, ראו את הקוד המקור ב-heroes-finished.html או כ-דף אינטרנט

לתשומת לב:  אם אתם מתקשים בעניין ה-dot/bracket notation שאנו משתמשים כדי לגשת לאובייקט JavaScript, אולי יעזור לכם לפתוח את הקובץ superheroes.json בלשונית אחרת או בעורך הקוד שלכם, ולהסתכל עליו תוך כדי מעבר על הקוד שלנו. בנוסף, שקלו לעשות חזרה על המאמר שלנו בנושא אובייקטים - עקרונות יסוד.

המרה בין אובייקטים וטקסט

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

request.responseType = 'json';

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

  • ()parse: מקבל מחרוזת JSON כפרמטר ומחזיר את אובייקט JavaScript בהתאם. 
  • ()stringify: מקבל אובייקט כפרמטר ומחזיר אותו כמחרוזת JSON בהתאם.

אתם יכולים לראות את הראשון בפעולה בקובץ -heroes-finished-json-parse.html - הוא עושה בדיוק את אותו הדבר כמו בדוגמא שבנינו קודם, רק שאנחנו קבענו שה-XHR יחזיר טקסט JSON גולמ, ואז השתמשנו ב-()parse על מנת להמיר אותו לאובייקט JavaScript זה הקוד הרלוונטי:

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

כפי שאתם יכולים לנחש, ()stringify עובד בדרך ההפוכה. נסו להזין את השורות הבאות לקונסולה:

var myJSON = { "name": "Chris", "age": "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString

כאן יצרנו אובייקט JavaScript ואז המרנו אותו למחרוזת JSON באמצעות ()stringify - ושמרנו את הערך שחזר במשתנה חדש. 

לסיכום

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

ראו גם

In this module

Document Tags and Contributors

Contributors to this page: ItzikDabush
Last updated by: ItzikDabush,