במדריך זה, אנו הולכים ללמוד על JSON. אנו נסקור את מבנה JSON, סוגי נתונים שונים וכיצד להשתמש ב- JSON בתוך JavaScript.
JSON הוא אחד המושגים החשובים ביותר שתוכלו ללמוד כמתכנת או כ- QA.
במהלך קריירת התכנות שלך אתה הולך להשתמש ב- JSON כל הזמן בין אם זה יצירת API, צריכת API או יצירת קבצי תצורה עבור היישום שלך.
JSON שמייצג סימון אובייקטים של JavaScript, הוא פשוט פורמט ייצוג נתונים הדומה מאוד ל- XML או YAML.
הוא משמש באופן נרחב ברחבי האינטרנט כמעט לכל ממשק API שאליו תגיע, כמו גם עבור קבצי תצורה ודברים כגון משחקים ועורכי טקסט.
דוגמה ל- JSON:
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
אנו משתמשים ב- JSON מכיוון שהוא קל מאוד לשלוח הלוך ושוב בבקשות ותגובות http בשל גודל הקובץ הקטן.
קל לקריאה בהשוואה למשהו כמו XML מכיוון שהוא הרבה יותר נקי ואין כל כך הרבה תגי פתיחה וסגירה שצריך לדאוג להם.
JSON גם משתלב יפה מאוד עם JavaScript מכיוון ש- JSON הוא רק תת קבוצה של JavaScript, מה שאומר שכל מה שאתה כותב ב- JSON הוא JavaScript תקף.
כמעט לכל שפה מרכזית אחת יש סוג כלשהו של ספרייה או פונקציונליות מובנית לניתוח מחרוזות JSON לאובייקטים או מחלקות בשפה זו.
זה הופך את העבודה עם נתוני JSON לקלה ביותר בתוך שפת תכנות.
עכשיו, אחרי שאנחנו מבינים מה זה JSON ולמה זה חשוב, בואו נצלול לחלק מהתחביר המעורב וסוגי הנתונים ש- JSON יכול לייצג.
כידוע JSON הוא פורמט ייצוג נתונים ולכן עלינו להיות מסוגלים לייצג סוגי נתונים מסוימים בתוכו.
JSON תומך באופן מקורי ב:
בואו נצלול לדוגמא כיצד להשתמש ב- json בתוך קובץ.
הדבר הראשון שאתה צריך לעשות הוא ליצור קובץ עם .json
סיומת בסוף זה.
אנו ניצור user.json
קובץ עם אובייקט משתמש המיוצג כ- JSON.
כדי ליצור אובייקט עלינו להשתמש בפתיחה וסגירה של סוגריים מתולתלים {}
ואז בתוך זה נניח את כל זוגות ערכי המפתח המרכיבים את האובייקט שלנו.
כל נכס אחד בתוך ה- JSON הוא צמד ערכי מפתח. המפתח חייב להיות מוקף כפול ''
ציטוטים ואחריהם נקודתיים :
ואז הערך עבור אותו מפתח.
אם יש לנו זוגות ערכי מפתח מרובים, אנו זקוקים לפסיקים ,
להפריד בין כל אחד מזוגות ערכי המפתח שלנו, בדומה לאופן שבו ניצור מערך בשפת תכנות רגילה.
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
בדוגמה שלעיל יש לנו קובץ שנקרא user.json
. בתוך הקובץ יש לנו סוגי נתונים שונים.
המפתחות מוקפים תמיד במרכאות כפולות. עבור הערכים, רק סוג המחרוזת מוקף במרכאות כפולות.
בדוגמה:
string
integer
boolean
Array
Array of Objects
נניח שיש לנו קובץ JSON שנקרא companies.json
שהוא מערך של אובייקטים של החברה:
[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]
בדוגמה שלעיל, יש לנו שני אובייקטים של חברה בתוך מערך JSON.
עכשיו בואו נראה כיצד נוכל להשתמש ב- JSON הנ'ל בתוך JavaScript.
ברוב התרחישים, אנו מקבלים JSON כמחרוזת ולא כאובייקט JSON. כדי לחקות את זה, אנו מייצגים את ה- JSON הנ'ל כמחרוזת בתוך JavaScript.
קובץ ה- html שלנו נראה כך:
JSON Example
let companies =
`[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
}
]`
console.log(JSON.parse(companies))
כאשר אנו בודקים את יומן המסוף בכלי המפתחים של Chrome, הפלט דומה למה שמוצג להלן:
אז נוכל לנתח את ה- JSON הנ'ל על ידי ציון מה אנו רוצים לחלץ. לדוגמא, אם היינו רוצים לקבל את השם של החברה הראשונה במערך, היינו משתמשים:
console.log(JSON.parse(
companies[0].name )) Output: Big corporate
כמו כן, כדי לקבל את הדירוג של החברה השנייה נשתמש:
console.log(JSON.parse(
companies[1].rating )) Output: 4.3
עכשיו נניח שיש לנו אובייקט JavaScript כמו זה שמוצג להלן:
JSON Example
var person = {
name: 'Brad',
age: 35
}
כדי להמיר את אובייקט ה- JavaScript של האדם ל- JSON אנו משתמשים stringify
שיטה:
jsonPerson = JSON.stringify(person);
הפלט הוא JSON חוקי:
{
'name': 'Brad',
'age': 35 }
הערה:console.log(jsonPerson.name)
הדפסים לא מוגדר . כדי לקבל את הערך, עלינו להמיר את JSON בחזרה לאובייקט JavaScript.כדי לגרום לאמור לעיל לעבוד, עלינו להמיר את ה- JSON בחזרה לאובייקט JavaScript.
כדי להמיר את אובייקט JSON הנ'ל בחזרה ל- JavaScript, אנו משתמשים ב- parse
שיטה:
jsPerson = JSON.parse(jsonPerson)
הערה:עכשיו אם ניסינו console.log(jsPerson.name)
אנחנו מקבלים את 'בראד'.
JSON Example
var person = {
name: 'Brad',
age: 35
}
jsonPerson = JSON.stringify(person); //convert to JSON
console.log(jsonPerson.name); //undefined
jsPerson = JSON.parse(jsonPerson); //convert to JS Object
console.log(jsPerson.name); //Brad
סוגי מידע:
[]
כללי התחביר של JSON:
{'name': 'value'}
אני מקווה שמצאתם שיעורי JSON עם Javascript מועילים. כעת תוכל לכתוב קבצי JSON פשוטים ומורכבים ולקיים אינטראקציה עם מחרוזות JSON בתוך JavaScript.