V tej vadnici bomo spoznali JSON. Obravnavali bomo strukturo JSON, različne vrste podatkov in kako uporabljati JSON znotraj JavaScript.
JSON je eden najpomembnejših konceptov, ki se ga lahko naučite kot programer ali kot QA.
V celotni programski karieri boste JSON uporabljali ves čas, ne glede na to, ali ustvarjate API, uporabljate API ali ustvarjate konfiguracijske datoteke za svojo aplikacijo.
JSON, ki je kratica za zapis predmeta JavaScript, je preprosto oblika predstavitve podatkov, ki je zelo podobna XML ali YAML.
V internetu se pogosto uporablja za skoraj vsak posamezen API, do katerega boste dostopali, pa tudi za konfiguracijske datoteke in stvari, kot so igre in urejevalniki besedil.
Primer JSON-a:
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
JSON uporabljamo, ker je zaradi majhnosti datotek izjemno lahko pošiljati v http zahtevke in odgovore.
V primerjavi s podobnim XML ga je enostavno prebrati, saj je veliko bolj čist in ni toliko odprtih in zapiralnih oznak, ki bi vas skrbelo.
JSON se zelo lepo integrira tudi z JavaScriptom, saj je JSON le podnabor JavaScript, kar pomeni, da je vse, kar napišete v JSON, veljaven JavaScript.
Skoraj vsak posamezni večji jezik ima neko obliko knjižnice ali vgrajeno funkcionalnost za razčlenitev nizov JSON na predmete ali razrede v tem jeziku.
Tako je delo s podatki JSON izjemno enostavno znotraj programskega jezika.
Zdaj, ko razumemo, kaj je JSON in zakaj je pomemben, se poglobimo v nekaj sintakse in tipov podatkov, ki jih lahko predstavlja JSON.
Kot vemo, je JSON oblika predstavitve podatkov, zato moramo v njem lahko predstaviti določene tipe podatkov.
JSON izvorno podpira:
Poglejmo si primer, kako uporabiti json znotraj datoteke.
Prva stvar, ki jo morate storiti, je ustvariti datoteko z .json
podaljšek na koncu.
Ustvarili bomo user.json
datoteka z uporabniškim objektom, predstavljenim kot JSON.
Za ustvarjanje predmeta moramo uporabiti odpiranje in zapiranje zavitih oklepajev {}
nato pa bomo postavili vse pare ključnih vrednosti, ki sestavljajo naš objekt.
Vsaka lastnost znotraj JSON je par ključ vrednost. Ključ mora biti obkrožen z dvojnimi ''
narekovaji, čemur sledi dvopičje :
in nato vrednost za ta ključ.
Če imamo več parov vrednosti ključ, potrebujemo vejice ,
ločevanje vsakega izmed naših parov vrednosti ključev, podobno kot bi ustvarili matriko v običajnem programskem jeziku.
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
V zgornjem primeru imamo datoteko z imenom user.json
. V datoteki imamo različne vrste podatkov.
Tipke so vedno obdane z dvojnimi narekovaji. Za vrednosti je samo vrsta niza obdana z dvojnimi narekovaji.
V primeru:
string
integer
boolean
Array
Array of Objects
Predpostavimo, da imamo datoteko JSON z imenom companies.json
kar je vrsta objektov podjetja:
[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]
V zgornjem primeru imamo znotraj matrike JSON dva predmeta podjetja.
Zdaj pa poglejmo, kako lahko uporabimo zgornji JSON znotraj JavaScript-a.
V večini primerov dobimo JSON kot niz in ne kot JSON. Za posnemanje tega predstavljamo zgornji JSON kot niz znotraj JavaScript-a.
Naša datoteka html je videti tako:
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))
Ko v orodjih za razvijalce Chrome pregledamo dnevnik konzole, je rezultat podoben tistemu, ki je prikazan spodaj:
Nato lahko zgornji JSON razčlenimo tako, da določimo, kaj želimo izvleči. Če bi na primer želeli dobiti ime prvega podjetja v polju, bi uporabili:
console.log(JSON.parse(
companies[0].name )) Output: Big corporate
Prav tako bi za oceno drugega podjetja uporabili:
console.log(JSON.parse(
companies[1].rating )) Output: 4.3
Zdaj predpostavimo, da imamo objekt JavaScript, kot je prikazan spodaj:
JSON Example
var person = {
name: 'Brad',
age: 35
}
Za pretvorbo osebnega predmeta JavaScript v JSON uporabimo stringify
metoda:
jsonPerson = JSON.stringify(person);
Rezultat je veljaven JSON:
{
'name': 'Brad',
'age': 35 }
Opomba:console.log(jsonPerson.name)
odtisi nedoločeno . Da dobimo vrednost, moramo JSON pretvoriti nazaj v objekt JavaScript.Da bo zgornje delo delovalo, moramo JSON pretvoriti nazaj v objekt JavaScript.
Za pretvorbo zgornjega predmeta JSON nazaj v JavaScript uporabimo parse
metoda:
jsPerson = JSON.parse(jsonPerson)
Opomba:Zdaj, če bi poskusili console.log(jsPerson.name)
dobimo 'Brada'.
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
Vrste podatkov:
[]
Sintaksna pravila JSON:
{'name': 'value'}
Upam, da se vam je ta JSON vadnica z Javascriptom zdela koristna. Zdaj lahko v JavaScript zapisujete preproste in zapletene datoteke JSON in komunicirate z nizi JSON.