Падручнік JSON - Даведайцеся, як выкарыстоўваць JSON з JavaScript

У гэтым уроку мы збіраемся даведацца пра JSON. Мы разгледзім структуру JSON, розныя тыпы дадзеных і тое, як выкарыстоўваць JSON у JavaScript.

JSON - гэта адна з найбольш важных канцэпцый, якую вы можаце даведацца як праграміст альбо як кантроль якасці.

На працягу ўсёй вашай праграмнай кар'еры вы ўвесь час будзеце выкарыстоўваць 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
  • friends - гэта 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 Developer Tools, вынікі аналагічныя паказаным ніжэй:

Прыклад 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


Рэзюмэ

  • JSON расшыфроўваецца як JavaScript Object Notation
  • Лёгкі фармат абмену дадзенымі
  • Заснавана на падмностве JavaScript
  • Лёгка чытаць і пісаць
  • Мова незалежная
  • Можа быць прааналізаваны на большасці сучасных моў праграмавання

Тыпы дадзеных:

  • Нумар: Няма розніцы паміж цэлым і плаваючым
  • Радок: Радок знакаў Unicode. Выкарыстоўвайце падвойныя двукоссі
  • Булева: Праўда ці хлусня
  • Масіў: Упарадкаваны спіс з 0 ці больш значэнняў у []
  • Аб'ект: Неўпарадкаваны збор пар ключ / значэнне
  • Нуль: Пустое значэнне

Правілы сінтаксісу JSON:

  • Выкарыстоўвае пары ключ / значэнне - напрыклад {'name': 'value'}
  • Выкарыстоўвае падвойныя двукоссі вакол КЛЮЧ
  • Неабходна выкарыстоўваць названыя тыпы дадзеных
  • Тып файла .json
  • Тып MIME - 'Application / json'

Спадзяюся, вам быў карысны гэты падручнік па JSON з Javascript. Цяпер вы можаце пісаць простыя і складаныя файлы JSON і ўзаемадзейнічаць са радкамі JSON унутры JavaScript.