עיקרי bash מדריך JSON - למד כיצד להשתמש ב- JSON עם JavaScript

מדריך JSON - למד כיצד להשתמש ב- JSON עם JavaScript

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

JSON הוא אחד המושגים החשובים ביותר שתוכלו ללמוד כמתכנת או כ- QA.

במהלך קריירת התכנות שלך אתה הולך להשתמש ב- JSON כל הזמן בין אם זה יצירת API, צריכת API או יצירת קבצי תצורה עבור היישום שלך.

מה זה JSON

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

אנו משתמשים ב- JSON מכיוון שהוא קל מאוד לשלוח הלוך ושוב בבקשות ותגובות http בשל גודל הקובץ הקטן.

קל לקריאה בהשוואה למשהו כמו XML מכיוון שהוא הרבה יותר נקי ואין כל כך הרבה תגי פתיחה וסגירה שצריך לדאוג להם.

JSON גם משתלב יפה מאוד עם JavaScript מכיוון ש- JSON הוא רק תת קבוצה של JavaScript, מה שאומר שכל מה שאתה כותב ב- JSON הוא JavaScript תקף.

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

זה הופך את העבודה עם נתוני JSON לקלה ביותר בתוך שפת תכנות.

סוגי נתונים של JSON

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

כידוע JSON הוא פורמט ייצוג נתונים ולכן עלינו להיות מסוגלים לייצג סוגי נתונים מסוימים בתוכו.

JSON תומך באופן מקורי ב:

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

דוגמה של JSON

בואו נצלול לדוגמא כיצד להשתמש ב- json בתוך קובץ.

הדבר הראשון שאתה צריך לעשות הוא ליצור קובץ עם .json סיומת בסוף זה.

אנו ניצור user.json קובץ עם אובייקט משתמש המיוצג כ- 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
isProgrammer הוא boolean
תחביבים זה Array
חברים זה Array of Objects

הערה:אין פסיק בסוף המאפיין האחרון בקובץ JSON או אובייקט JSON.

כיצד להשתמש במחרוזת JSON בתוך JavaScript

נניח שיש לנו קובץ 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 של JavaScript

אז נוכל לנתח את ה- JSON הנ'ל על ידי ציון מה אנו רוצים לחלץ. לדוגמא, אם היינו רוצים לקבל את השם של החברה הראשונה במערך, היינו משתמשים:

console.log(JSON.parse(
companies[0].name ))  Output: Big corporate

כמו כן, כדי לקבל את הדירוג של החברה השנייה נשתמש:

console.log(JSON.parse(
companies[1].rating ))  Output: 4.3

כיצד להמיר אובייקט JavaScript ל- JSON

עכשיו נניח שיש לנו אובייקט 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

כדי להמיר את אובייקט 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