U ovom uputstvu naučit ćemo o JSON-u. Pokrivat ćemo JSON strukturu, različite tipove podataka i kako koristiti JSON unutar JavaScript-a.
JSON je jedan od najvažnijih koncepata koji možete naučiti kao programer ili kao QA.
Tijekom svoje programske karijere cijelo ćete vrijeme koristiti JSON bilo da se radi o stvaranju API-ja, trošenju API-ja ili kreiranju konfiguracijskih datoteka za vašu aplikaciju.
JSON što je skraćenica od JavaScript oznake objekta, jednostavno je format predstavljanja podataka vrlo sličan XML-u ili YAML-u.
Široko se koristi na internetu za gotovo svaki pojedini API kojem ćete pristupiti, kao i za konfiguracijske datoteke i stvari kao što su igre i uređivači teksta.
Primjer 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': [...]
}] }
Koristimo JSON jer je izuzetno lagan za slanje naprijed-natrag u http zahtjevima i odgovorima zbog male veličine datoteke.
Lako ga je čitati u usporedbi s nečim poput XML-a jer je puno čišći i nema toliko oznaka za otvaranje i zatvaranje zbog kojih biste trebali brinuti.
JSON se također vrlo dobro integrira s JavaScriptom, jer je JSON samo podskup JavaScript, što znači da sve što napišete u JSON vrijedi JavaScript.
Gotovo svaki glavni jezik ima neki oblik biblioteke ili ugrađenu funkcionalnost za raščlanjivanje JSON nizova na objekte ili klase na tom jeziku.
To čini rad s JSON podacima izuzetno jednostavnim unutar programskog jezika.
Sad kad smo shvatili što je JSON i zašto je važan, zaronimo u neke sintakse i tipove podataka koje JSON može predstavljati.
Kao što znamo JSON je format predstavljanja podataka, tako da u njemu moramo biti u mogućnosti predstaviti određene tipove podataka.
JSON izvorno podržava:
Zaronimo u primjer kako koristiti json unutar datoteke.
Prva stvar koju trebate napraviti je stvoriti datoteku sa .json
produžetak na kraju.
Stvorit ćemo user.json
datoteka s korisničkim objektom predstavljenim kao JSON.
Za stvaranje objekta trebamo koristiti otvaranje i zatvaranje kovrčavih zagrada {}
a zatim ćemo unutar toga staviti sve parove ključnih vrijednosti koji čine naš objekt.
Svako pojedinačno svojstvo unutar JSON-a je par ključeva vrijednosti. Ključ mora biti okružen dvostrukim ''
navodnici iza kojih slijedi dvotačka :
a zatim vrijednost za taj ključ.
Ako imamo više parova vrijednosti ključeva, trebaju nam zarezi ,
razdvajanje svakog pojedinog od naših parova vrijednosti ključeva, slično onome kako bismo kreirali niz u normalnom programskom jeziku.
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
U gornjem primjeru imamo datoteku koja se zove user.json
. Unutar datoteke imamo različite tipove podataka.
Tipke su uvijek okružene dvostrukim navodnicima. Za vrijednosti, samo je niz string okružen dvostrukim navodnicima.
U primjeru:
string
integer
boolean
Array
Array of Objects
Pretpostavimo da imamo JSON datoteku koja se zove companies.json
što je niz objekata kompanije:
[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]
U gornjem primjeru imamo dva objekta kompanije unutar JSON niza.
Sada da vidimo kako možemo koristiti gornji JSON unutar JavaScript-a.
U većini scenarija dobivamo JSON kao niz, a ne JSON objekt. Da bismo ovo oponašali, predstavljamo gornji JSON kao niz unutar JavaScript-a.
Naša html datoteka izgleda ovako:
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))
Kada pregledamo evidenciju konzole u Chrome Developer Tools, izlaz je sličan onome što je prikazano u nastavku:
Tada možemo raščlaniti gornji JSON specificirajući ono što želimo izdvojiti. Na primjer, ako bismo željeli dobiti ime prve kompanije u nizu, koristili bismo:
console.log(JSON.parse(
companies[0].name )) Output: Big corporate
Isto tako, da bismo dobili ocjenu druge kompanije, koristili bismo:
console.log(JSON.parse(
companies[1].rating )) Output: 4.3
Sada pretpostavimo da imamo JavaScript objekt poput prikazanog dolje:
JSON Example
var person = {
name: 'Brad',
age: 35
}
Da bismo pretvorili JavaScript objekt osobe u JSON, koristimo stringify
metoda:
jsonPerson = JSON.stringify(person);
Izlaz je valjani JSON:
{
'name': 'Brad',
'age': 35 }
Bilješka:console.log(jsonPerson.name)
otisci undefined . Da bismo dobili vrijednost, moramo pretvoriti JSON natrag u JavaScript objekt.Da bi gore navedeno funkcioniralo, moramo JSON pretvoriti natrag u JavaScript objekt.
Za pretvaranje gore navedenog JSON objekta natrag u JavaScript koristimo parse
metoda:
jsPerson = JSON.parse(jsonPerson)
Bilješka:Sad ako bismo probali console.log(jsPerson.name)
dobijamo '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
Tipovi podataka:
[]
JSON sintaksna pravila:
{'name': 'value'}
Nadam se da vam je ovaj JSON vodič s Javascriptom bio koristan. Sada možete pisati jednostavne i složene JSON datoteke i komunicirati s JSON nizovima unutar JavaScript-a.