Vodič za JSON - Saznajte kako koristiti JSON s JavaScriptom

U ovom uputstvu naučit ćemo o JSON-u. Obradit ć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 upotrebljavati JSON bilo da se radi o stvaranju API-ja, trošenju API-ja ili stvaranju konfiguracijskih datoteka za vašu aplikaciju.

Što je JSON

JSON, što je kratica za JavaScript objekt, 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 knjižnice 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.

Vrste podataka JSON

Sad kad razumijemo š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 sposobni predstaviti određene vrste podataka.

JSON izvorno podržava:

  • žice
  • brojevi brojevi mogu biti u bilo kojem formatu bilo da su decimalni brojevi cijeli brojevi negativni brojevi, čak i brojevi znanstvenih zapisa
  • booleovi koji mogu biti istiniti ili lažni
  • null što u biti ne znači ništa
  • Nizovi što može biti popis bilo koje gore navedene vrste
  • Predmeti objekt je najsloženiji, ali najčešće korišten tip unutar jsona, jer vam omogućuje predstavljanje podataka koji su parovi ključnih vrijednosti

Primjer JSON-a

Zaronimo u primjer kako koristiti json unutar datoteke.

Prvo što trebate napraviti je stvoriti datoteku sa .json produžetak na njegovom kraju.

Stvorit ćemo user.json datoteka s korisničkim objektom predstavljenim kao JSON.

Da bismo stvorili objekt trebamo upotrijebiti otvaranje i zatvaranje kovrčavih zagrada {} a zatim ćemo unutar toga staviti sve parove ključnih vrijednosti koji čine naš objekt.

Svako pojedino svojstvo unutar JSON-a je par vrijednosti ključ. Ključ mora biti okružen dvostrukim '' citati iza kojih slijedi dvotačka : a zatim vrijednost za taj ključ.

Ako imamo više parova vrijednosti ključeva, trebamo zareze , razdvajanje svakog pojedinog od naših parova vrijednosti ključeva, slično onome kako bismo stvorili 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 vrste podataka.

Tipke su uvijek okružene dvostrukim navodnicima. Za vrijednosti je samo vrsta niza okružena 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 koristiti JSON niz unutar JavaScript-a

Pretpostavimo da imamo JSON datoteku koja se zove companies.json što je niz objekata tvrtke:

[
{
'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 tvrtke unutar JSON polja.

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 to 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 zapis 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 navodeći što želimo izdvojiti. Na primjer, ako bismo željeli dobiti ime prve tvrtke u nizu, koristili bismo:

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

Isto tako, za dobivanje ocjene druge tvrtke 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 nedefiniran . 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

Da bismo gornji JSON objekt pretvorili natrag u JavaScript, koristimo parse metoda:

jsPerson = JSON.parse(jsonPerson) Bilješka:Sad ako bismo pokušali console.log(jsPerson.name) dobivamo 'Brada'.

Potpuni 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 razmjene podataka
  • Na temelju podskupa JavaScripta
  • Lako za čitanje i pisanje
  • 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
  • Niz: Niz Unicode znakova. Koristite dvostruke navodnike
  • Boolean: Istina ili laž
  • Niz: Poredani popis 0 ili više vrijednosti u []
  • Objekt: Neuređena kolekcija parova ključ / vrijednost
  • Null: Prazna vrijednost

JSON pravila sintakse:

  • Koristi parove ključ / vrijednost - npr. {'name': 'value'}
  • Okolo koristi dvostruke navodnike KLJUČ
  • Morate koristiti navedene vrste 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.