Vadnica za JSON - Naučite se uporabljati JSON z JavaScriptom

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.




Kaj je JSON

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


Zakaj uporabljati JSON

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.



Vrste podatkov JSON

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:

  • strune
  • številke števila so lahko v kateri koli obliki, ne glede na to, ali gre za decimalna števila cela števila negativna števila in celo številke znanstvenega zapisa
  • logične vrednosti ki je lahko resnična ali napačna
  • nič kar v bistvu ne pomeni nič
  • Polja ki je lahko seznam katere koli od zgornjih vrst
  • Predmeti objekt je najbolj zapleten, vendar najpogosteje uporabljen tip v jsonu, saj vam omogoča predstavitev podatkov, ki so pari ključnih vrednosti


Primer JSON

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.

Primer datoteke JSON

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

  • ime je string
  • starost je integer
  • isProgrammer je boolean
  • hobiji je Array
  • friends je Array of Objects
Opomba:Na koncu zadnje lastnosti v datoteki JSON ali predmeta JSON ni vejice.

Kako uporabljati niz JSON znotraj JavaScript

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:

Primer javascripta JSON

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

Kako pretvoriti objekt JavaScript v JSON

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.

Kako pretvoriti objekt JSON v 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'.

Popoln primer


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


Povzetek

  • JSON je kratica za JavaScript Object Notation
  • Lahka oblika izmenjave podatkov
  • Na podlagi podskupine JavaScript
  • Enostavno branje in pisanje
  • Jezik neodvisen
  • Se lahko razčleni v večini sodobnih programskih jezikov

Vrste podatkov:

  • Številka: Ni razlike med celo število in float
  • Vrvica: Niz znakov Unicode. Uporabite dvojne narekovaje
  • Logično: Pravilno ali napačno
  • Matrika: Urejeni seznam 0 ali več vrednosti v []
  • Predmet: Neurejena zbirka parov ključ / vrednost
  • Nič: Prazna vrednost

Sintaksna pravila JSON:

  • Uporablja pare ključ / vrednost - npr. {'name': 'value'}
  • Okoli uporablja dvojne narekovaje KLJUČ
  • Uporabiti je treba določene vrste podatkov
  • Tip datoteke je .json
  • Tip MIME je 'Application / json'

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.