Mafunzo ya JSON - Jifunze jinsi ya kutumia JSON na JavaScript

Katika mafunzo haya, tutajifunza juu ya JSON. Tutashughulikia muundo wa JSON, aina tofauti za data na jinsi ya kutumia JSON ndani ya JavaScript.

JSON ni moja ya dhana muhimu zaidi ambazo unaweza kujifunza kama programu au kama QA.

Katika kipindi chote cha kazi yako ya programu utatumia JSON kila wakati iwe ni kuunda API, kutumia API, au kuunda faili za usanidi wa programu yako.




JSON ni nini

JSON ambayo inasimama nukuu ya kitu cha JavaScript, ni muundo wa uwakilishi wa data sawa na XML au YAML.

Inatumika sana kwenye wavuti kwa karibu kila API ambayo utapata, na pia faili za usanidi na vitu kama michezo na wahariri wa maandishi.


Mfano wa JSON:

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


Kwanini Utumie JSON

Tunatumia JSON kwa sababu ni nyepesi sana kupeleka na kurudi kwenye maombi na majibu ya http kwa sababu ya saizi ndogo ya faili.

Ni rahisi kusoma ikilinganishwa na kitu kama XML kwani ni safi zaidi na hakuna vitambulisho vingi vya kufungua na kufunga kuwa na wasiwasi.

JSON pia inaunganisha vizuri sana na JavaScript kwani JSON ni sehemu ndogo tu ya JavaScript, ambayo inamaanisha kila kitu unachoandika katika JSON ni JavaScript halali.


Karibu kila lugha kuu ina aina fulani ya maktaba au utendaji uliojengwa ili kuchanganua nyuzi za JSON kuwa vitu au madarasa katika lugha hiyo.

Hii inafanya kufanya kazi na data ya JSON iwe rahisi sana ndani ya lugha ya programu.



Aina za Takwimu za JSON

Sasa kwa kuwa tunaelewa JSON ni nini na kwanini ni muhimu, wacha tuzame kwenye sintaksia inayohusika na aina za data ambazo JSON inaweza kuwakilisha.

Kama tunavyojua JSON ni muundo wa uwakilishi wa data kwa hivyo tunahitaji kuweza kuwakilisha aina fulani za data ndani yake.


JSON asili inasaidia:

  • kamba
  • namba nambari zinaweza kuwa katika muundo wowote ikiwa ni nambari za desimali nambari kamili nambari hasi hata nambari za kisayansi za nukuu
  • booleans ambayo inaweza kuwa kweli au ya uwongo
  • batili ambayo kimsingi inasimama bure
  • Safu ambayo inaweza kuwa orodha ya aina yoyote hapo juu
  • Vitu kitu ni aina ngumu zaidi lakini inayotumiwa zaidi ndani ya json kwani hukuruhusu kuwakilisha data ambazo ni jozi muhimu za thamani


Mfano wa JSON

Wacha tuingie katika mfano wa jinsi ya kutumia json ndani ya faili.

Jambo la kwanza ambalo unahitaji kufanya ni kuunda faili na .json ugani mwisho wake.

Tutaunda user.json faili iliyo na kitu cha mtumiaji kinachowakilishwa kama JSON.


Kuunda kitu tunahitaji kutumia braces za kufungua na kufunga {} na kisha ndani ya hiyo tutaweka jozi zote muhimu za thamani ambazo zinaunda kitu chetu.

Kila mali moja ndani ya JSON ni jozi muhimu ya thamani. Ufunguo lazima uzungukwa na maradufu '' nukuu zikifuatiwa na koloni : na kisha thamani ya ufunguo huo.

Ikiwa tuna jozi muhimu kadhaa, tunahitaji koma , kutenganisha kila moja ya jozi zetu muhimu za thamani, sawa na jinsi tunavyoweza kuunda safu katika lugha ya kawaida ya programu.

Mfano Faili ya JSON

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

Katika mfano hapo juu, tuna faili inayoitwa user.json. Ndani ya faili tuna aina tofauti za data.


Funguo daima huzungukwa na nukuu mbili. Kwa maadili, aina ya kamba tu imezungukwa na nukuu mbili.

Kwa mfano:

  • jina ni string
  • umri ni integer
  • niProgrammer ni boolean
  • Hobbies ni Array
  • marafiki ni Array of Objects
Kumbuka:Hakuna koma katika mwisho wa mali ya mwisho kwenye faili ya JSON au kitu cha JSON.

Jinsi ya kutumia Kamba ya JSON Ndani ya JavaScript

Wacha tufikirie kuwa tuna faili ya JSON inayoitwa companies.json ambayo ni safu ya vitu vya kampuni:

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

Katika mfano hapo juu, tuna vitu viwili vya kampuni ndani ya safu ya JSON.

Sasa hebu tuone ni jinsi gani tunaweza kutumia JSON hapo juu ndani ya JavaScript.

Katika hali nyingi, tunapata JSON kama kamba badala ya kitu cha JSON. Kuiga hii, tunawakilisha JSON hapo juu kama kamba ndani ya JavaScript.

Faili yetu ya html inaonekana kama:


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

Tunapoangalia logi ya dashibodi katika Zana za Wasanidi Programu za Chrome, pato ni sawa na ile iliyoonyeshwa hapa chini:

Mfano wa JavaScript wa JSON

Kisha tunaweza kuchanganua JSON hapo juu kwa kubainisha kile tunachotaka kutoa. Kwa mfano, ikiwa tunataka kupata jina la kampuni ya kwanza katika safu tutatumia:

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

Vivyo hivyo, kupata alama ya kampuni ya pili tutatumia:

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

Jinsi ya kubadilisha kitu cha JavaScript kuwa JSON

Sasa tuseme tuna kitu cha JavaScript kama ile iliyoonyeshwa hapa chini:


JSON Example

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

Kubadilisha kitu cha JavaScript kuwa JSON tunatumia stringify njia:

jsonPerson = JSON.stringify(person);

Pato ni JSON halali:

{
'name': 'Brad',
'age': 35 }
Kumbuka:console.log(jsonPerson.name) magazeti kisichojulikana . Ili kupata thamani, lazima tuibadilishe JSON kuwa kitu cha JavaScript.

Ili kufanya kazi hapo juu, tunahitaji kubadilisha JSON kuwa kitu cha JavaScript.

Jinsi ya kubadilisha kitu cha JSON kuwa JavaScript

Kubadilisha kitu hapo juu cha JSON kurudi kwenye JavaScript, tunatumia parse njia:

jsPerson = JSON.parse(jsonPerson) Kumbuka:Sasa ikiwa tulijaribu console.log(jsPerson.name) tunapata 'Brad'.

Mfano Kamili


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


Muhtasari

  • JSON inasimama kwa Notation ya Object JavaScript
  • Fomati nyepesi ya kubadilishana data
  • Kulingana na seti ndogo ya JavaScript
  • Rahisi kusoma na kuandika
  • Lugha huru
  • Inaweza kuchanganuliwa katika lugha nyingi za kisasa za programu

Aina za Takwimu:

  • Nambari: Hakuna tofauti kati ya nambari kamili na kuelea
  • Kamba: Kamba ya herufi za Unicode. Tumia nukuu mara mbili
  • Boolean: Kweli au uwongo
  • Mpangilio: Orodha iliyoagizwa ya maadili 0 au zaidi katika []
  • Kitu: Mkusanyiko usiodhibitiwa wa jozi muhimu / thamani
  • Tupu: Thamani tupu

Sheria za Sintaksia ya JSON:

  • Hutumia jozi muhimu / za thamani - mf. {'name': 'value'}
  • Inatumia nukuu mara mbili karibu MUHIMU
  • Lazima utumie aina maalum za data
  • Aina ya faili ni .json
  • Aina ya MIME ni 'Matumizi / json'

Natumahi umepata mafunzo haya ya JSON na Javascript muhimu. Sasa unaweza kuandika faili rahisi na ngumu za JSON na ushirikiane na nyuzi za JSON ndani ya JavaScript.