JSON námskeið - Lærðu hvernig á að nota JSON með JavaScript

Í þessari kennslu munum við læra um JSON. Við munum fjalla um JSON uppbyggingu, mismunandi gagnategundir og hvernig á að nota JSON inni í JavaScript.

JSON er eitt mikilvægasta hugtakið sem þú getur lært sem forritari eða sem QA.

Allan forritunarferilinn þinn ætlarðu að nota JSON allan tímann hvort sem það er að búa til API, neyta API eða búa til stillingarskrár fyrir forritið þitt.




Hvað er JSON

JSON sem stendur fyrir JavaScript hlutaskrift, er einfaldlega gagnatengingar snið mjög svipað og XML eða YAML.

Það er notað víða um internetið fyrir næstum hvert forritaskil sem þú færð aðgang að, sem og fyrir uppstillingarskrár og hluti eins og leiki og ritstjórnendur.


Dæmi um JSON:



#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }


Af hverju að nota JSON

Við notum JSON vegna þess að það er mjög létt að senda fram og til baka í http beiðnum og svörum vegna lítillar skráarstærðar.

Það er auðvelt að lesa í samanburði við eitthvað eins og XML þar sem það er miklu hreinna og það eru ekki eins mörg opnunar- og lokunarmerki til að hafa áhyggjur af.

JSON samlagast einnig mjög fallega JavaScript þar sem JSON er bara hluti af JavaScript, sem þýðir að allt sem þú skrifar í JSON er gilt JavaScript.


Næstum hvert einasta tungumál hefur einhvers konar bókasafn eða innbyggða virkni til að flokka JSON strengi í hluti eða bekki á því tungumáli.

Þetta gerir það að verkum að vinna með JSON gögn afar auðvelt inni í forritunarmáli.



JSON gagnategundir

Nú þegar við skiljum hvað JSON er og hvers vegna það er mikilvægt, skulum við kafa í nokkrar setningafræði sem málið varðar og þær gagnategundir sem JSON getur táknað.

Eins og við vitum er JSON gagnaframsetning snið svo við þurfum að geta táknað ákveðnar gagnategundir innan þess.


JSON styður innfæddur:

  • strengir
  • tölur tölur geta verið á hvaða sniði sem er, hvort sem um er að ræða aukastölur, heilu tölurnar, neikvæðar tölur, jafnvel vísindatölur
  • boolean sem getur verið annað hvort satt eða ósatt
  • núll sem í raun stendur fyrir ekki neitt
  • Fylki sem getur verið listi yfir hvaða tegund sem er hér að ofan
  • Hlutir hlutur er flóknasta en mest notaða tegundin innan json þar sem hún gerir þér kleift að tákna gögn sem eru lykilgildispör


JSON Dæmi

Við skulum kafa í dæmi um hvernig á að nota json inni í skránni.

Það fyrsta sem þú þarft að gera er að búa til skrá með .json framlengingu í lok þess.

Við ætlum að búa til user.json skrá með hlut notanda táknað sem JSON.


Til að búa til hlut þurfum við að nota opna og loka krullaða sviga {} og síðan inn í það munum við setja öll lykilgildispörin sem mynda hlutinn okkar.

Hver einasta eign í JSON er lykilgildi par. Lykillinn verður að vera umkringdur tvöföldum '' tilvitnanir á eftir ristli : og síðan gildi fyrir þann lykil.

Ef við höfum mörg lykilgildispör, þá þurfum við kommur , aðgreina hvert einasta lykilgildispör okkar, svipað og við myndum búa til fylki á venjulegu forritunarmáli.

Dæmi JSON File

#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }

Í dæminu hér að ofan höfum við skrá sem heitir user.json Inni í skránni höfum við mismunandi gagnategundir.


Lyklarnir eru alltaf umkringdir tvöföldum tilvitnunum. Fyrir gildin er aðeins strengategundin umkringd tvöföldum tilvitnunum.

Í dæminu:

  • nafn er string
  • aldur er integer
  • isProgrammer er boolean
  • áhugamál er Array
  • vinir er Array of Objects
Athugið:Það er ekkert kommu í lok síðustu eignar í JSON skránni eða JSON hlut.

Hvernig nota á JSON streng innan JavaScript

Við skulum gera ráð fyrir að við séum með JSON skrá sem heitir companies.json sem er fjöldi fyrirtækjahluta:

[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]

Í dæminu hér að ofan höfum við tvo fyrirtækjahluti inni í JSON fylki.

Nú skulum við sjá hvernig við getum notað JSON hér að ofan í JavaScript.

Í flestum sviðsmyndum fáum við JSON sem streng frekar en JSON hlut. Til að líkja eftir þessu táknum við ofangreindan JSON sem streng inni í JavaScript.

HTML skjalið okkar lítur út eins og:


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))

Þegar við skoðum stjórnborðið í Chrome Developer Tools er framleiðslan svipuð því sem sýnt er hér að neðan:

JSON javascript dæmi

Síðan getum við flett ofangreindum JSON með því að tilgreina hvað við viljum vinna. Til dæmis, ef við vildum fá nafn fyrsta fyrirtækisins í fylkinu myndum við nota:

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

Sömuleiðis, til að fá einkunn annars fyrirtækisins sem við notum:

console.log(JSON.parse(
companies[1].rating )) Output: 4.3

Hvernig á að umbreyta JavaScript hlut í JSON

Segjum nú að við séum með JavaScript-hlut eins og sýnt er hér að neðan:


JSON Example

var person = {
name: 'Brad',
age: 35
}

Til að breyta viðkomandi JavaScript hlut í JSON notum við stringify aðferð:

jsonPerson = JSON.stringify(person);

Framleiðslan er gilt JSON:

{
'name': 'Brad',
'age': 35 }
Athugið:console.log(jsonPerson.name) prentar óskilgreint . Til að fá verðmætið verðum við að breyta JSON aftur í JavaScript hlutinn.

Til að láta ofangreint virka verðum við að breyta JSON aftur í JavaScript hlutinn.

Hvernig á að umbreyta JSON hlut í JavaScript

Til að breyta ofangreindum JSON hlut aftur í JavaScript notum við parse aðferð:

jsPerson = JSON.parse(jsonPerson) Athugið:Nú ef við reyndum console.log(jsPerson.name) við fáum 'Brad'.

Fullkomið dæmi


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


Yfirlit

  • JSON stendur fyrir JavaScript Object Notation
  • Létt gagnaskiptaform
  • Byggt á undirmengi JavaScript
  • Auðvelt að lesa og skrifa
  • Tungumál óháð
  • Hægt að flokka á flestum nútímalegum forritunarmálum

Gagnategundir:

  • Fjöldi: Enginn munur á heiltölu og floti
  • Strengur: Strengur Unicode persóna. Notaðu tvöföld tilvitnun
  • Boolean: Satt eða ósatt
  • Array: Pantaður listi yfir 0 eða fleiri gildi í []
  • Hlutur: Óskipulagt safn lykil- / gildi para
  • Núll: Tómt gildi

Reglur um setningafræði JSON:

  • Notar lykil / gildi pör - t.d. {'name': 'value'}
  • Notar tvöfaldar tilvitnanir í kring Lykill
  • Verður að nota tilgreindar gagnategundir
  • Skráargerð er .json
  • MIME gerð er „Umsókn / json“

Ég vona að þér hafi fundist þetta JSON námskeið með Javascript gagnlegt. Þú getur nú skrifað einfaldar og flóknar JSON skrár og haft samskipti við JSON strengi inni í JavaScript.