Vodič za JSON - Saznajte kako koristiti JSON sa JavaScriptom

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.




Šta je JSON

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': [...]
}] }


Zašto koristiti JSON

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.



JSON tipovi podataka

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:

  • žice
  • brojevi brojevi mogu biti u bilo kojem formatu bilo da se radi o decimalnim brojevima cijeli broj negativni brojevi, čak i brojevi znanstvenih zapisa
  • booleans što može biti istinito ili netačno
  • null što u suštini ne znači ništa
  • Nizovi što može biti lista bilo koje gore navedene vrste
  • Predmeti objekt je najsloženiji, ali najčešće korišten tip unutar jsona, jer vam omogućava predstavljanje podataka koji su parovi ključnih vrijednosti


JSON primjer

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.

Primjer JSON datoteke

#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:

  • ime je string
  • starost je integer
  • isProgrammer je boolean
  • hobiji su Array
  • friends je Array of Objects
Bilješka:Na kraju posljednjeg svojstva u JSON datoteci ili JSON objektu nema zareza.

Kako se koristi JSON niz unutar JavaScript-a

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:

Primjer JSON javascripta

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

Kako pretvoriti JavaScript objekt u JSON

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.

Kako pretvoriti JSON objekt u JavaScript

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'.

Kompletni primjer


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


Sažetak

  • JSON je skraćenica od JavaScript Object Notation
  • Lagan format za razmjenu podataka
  • Zasnovan na podskupu JavaScript-a
  • Lako se čita i piše
  • Jezik neovisan
  • Može se raščlaniti na većini modernih programskih jezika

Tipovi podataka:

  • Broj: Nema razlike između cijelog broja i plutajućeg broja
  • Niz: Niz Unicode znakova. Koristite dvostruke navodnike
  • Boolean: Tačno ili netačno
  • Niz: Uređena lista od 0 ili više vrijednosti u []
  • Objekt: Neuređena kolekcija parova ključ / vrijednost
  • Null: Prazna vrijednost

JSON sintaksna pravila:

  • Koristi parove ključ / vrijednost - npr. {'name': 'value'}
  • Koristi dvostruke navodnike KLJUČ
  • Morate koristiti navedene tipove podataka
  • Tip datoteke je .json
  • MIME tip je „Application / json“

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.