ຕົ້ນຕໍ bash JSON Tutorial - ຮຽນຮູ້ວິທີການໃຊ້ JSON ກັບ JavaScript

JSON Tutorial - ຮຽນຮູ້ວິທີການໃຊ້ JSON ກັບ JavaScript

ໃນ ຄຳ ແນະ ນຳ ນີ້, ພວກເຮົາ ກຳ ລັງຈະຮຽນຮູ້ກ່ຽວກັບ JSON. ພວກເຮົາຈະເວົ້າເຖິງໂຄງສ້າງ JSON, ປະເພດຂໍ້ມູນທີ່ແຕກຕ່າງກັນແລະວິທີການໃຊ້ JSON ພາຍໃນ JavaScript.

JSON ແມ່ນ ໜຶ່ງ ໃນແນວຄວາມຄິດທີ່ ສຳ ຄັນທີ່ທ່ານສາມາດຮຽນຮູ້ເປັນນັກຂຽນໂປແກຼມຫຼືເປັນ QA.

ຕະຫຼອດອາຊີບການຂຽນໂປຼແກຼມຂອງທ່ານທ່ານຈະໃຊ້ JSON ຕະຫຼອດເວລາບໍ່ວ່າຈະເປັນການສ້າງ API, ການໃຊ້ API, ຫຼືການສ້າງແຟ້ມ config ສຳ ລັບໂປແກຼມຂອງທ່ານ.

JSON ແມ່ນຫຍັງ

JSON ເຊິ່ງ ໝາຍ ເຖິງການ ກຳ ນົດວັດຖຸ JavaScript, ແມ່ນພຽງແຕ່ຮູບແບບການສະແດງຂໍ້ມູນທີ່ຄ້າຍຄືກັບ XML ຫຼື YAML.

ມັນຖືກ ນຳ ໃຊ້ຢ່າງແຜ່ຫຼາຍທົ່ວອິນເຕີເນັດ ສຳ ລັບເກືອບທຸກໆ API ທີ່ທ່ານຈະເຂົ້າເຖິງ, ລວມທັງ ສຳ ລັບໄຟລ໌ທີ່ ກຳ ນົດແລະສິ່ງຕ່າງໆເຊັ່ນ: ເກມແລະບັນນາທິການຕົວ ໜັງ ສື.

ຕົວຢ່າງຂອງ JSON:

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

ເປັນຫຍັງໃຊ້ JSON

ພວກເຮົາໃຊ້ JSON ເພາະວ່າມັນມີນ້ ຳ ໜັກ ເບົາທີ່ສຸດໃນການສົ່ງແລະຮ້ອງຂໍຕອບກັບ http ຍ້ອນວ່າຂະ ໜາດ ເອກະສານຂະ ໜາດ ນ້ອຍ.

ມັນງ່າຍທີ່ຈະອ່ານເມື່ອທຽບກັບບາງສິ່ງບາງຢ່າງເຊັ່ນ XML ເນື່ອງຈາກວ່າມັນສະອາດຫຼາຍແລະບໍ່ມີປ້າຍເປີດແລະປິດຫຼາຍເທົ່າທີ່ຈະຕ້ອງກັງວົນ.

JSON ຍັງເຊື່ອມໂຍງເຂົ້າກັບ JavaScript ໄດ້ດີຫຼາຍເນື່ອງຈາກ JSON ແມ່ນພຽງແຕ່ຊຸດຍ່ອຍຂອງ JavaScript ເທົ່ານັ້ນ, ນັ້ນ ໝາຍ ຄວາມວ່າທຸກສິ່ງທີ່ທ່ານຂຽນໃນ JSON ແມ່ນ JavaScript ທີ່ຖືກຕ້ອງ.

ເກືອບວ່າທຸກໆພາສາທີ່ ສຳ ຄັນມີຮູບແບບຂອງຫໍສະມຸດຫລືມີ ໜ້າ ທີ່ສ້າງຂຶ້ນເພື່ອແຍກສາຍ JSON ເຂົ້າໃນວັດຖຸຫລືຫ້ອງຮຽນໃນພາສານັ້ນ.

ນີ້ເຮັດໃຫ້ການເຮັດວຽກກັບຂໍ້ມູນ JSON ງ່າຍທີ່ສຸດພາຍໃນພາສາການຂຽນໂປແກຼມ.

ປະເພດຂໍ້ມູນຂອງ JSON

ຕອນນີ້ພວກເຮົາເຂົ້າໃຈວ່າ JSON ແມ່ນຫຍັງແລະເປັນຫຍັງມັນຈຶ່ງ ສຳ ຄັນ, ໃຫ້ຂຽນເຂົ້າໃນບາງ syntax ທີ່ກ່ຽວຂ້ອງແລະປະເພດຂໍ້ມູນທີ່ JSON ສາມາດເປັນຕົວແທນ.

ດັ່ງທີ່ພວກເຮົາຮູ້ແລ້ວວ່າ JSON ແມ່ນຮູບແບບການສະແດງຂໍ້ມູນດັ່ງນັ້ນພວກເຮົາ ຈຳ ເປັນຕ້ອງສາມາດເປັນຕົວແທນຂອງປະເພດຂໍ້ມູນທີ່ແນ່ນອນພາຍໃນນັ້ນ.

JSON ສະ ໜັບ ສະ ໜູນ ພື້ນເມືອງ:

ເຊືອກ
ຕົວເລກ ຕົວເລກສາມາດຢູ່ໃນຮູບແບບໃດກໍ່ຕາມບໍ່ວ່າພວກເຂົາຈະເປັນຕົວເລກທົດສະນິຍົມທັງ ໝົດ ຕົວເລກຕົວເລກລົບເຖິງແມ່ນວ່າຕົວເລກແນວຄິດທາງວິທະຍາສາດ
ບູຊາ ເຊິ່ງສາມາດເປັນຄວາມຈິງຫຼືຜິດ
null ທີ່ສໍາຄັນຢືນສໍາລັບການບໍ່ມີຫຍັງ
Arrays ເຊິ່ງສາມາດເປັນບັນຊີຂອງປະເພດໃດ ໜຶ່ງ ຂ້າງເທິງ
ຈຸດປະສົງ ວັດຖຸແມ່ນປະເພດທີ່ສັບສົນທີ່ສຸດແຕ່ມີການ ນຳ ໃຊ້ຫຼາຍທີ່ສຸດພາຍໃນ json ເພາະມັນຊ່ວຍໃຫ້ທ່ານສາມາດສະແດງຂໍ້ມູນທີ່ເປັນຄູ່ ສຳ ຄັນ

ຕົວຢ່າງ JSON

ໃຫ້ເຂົ້າເບິ່ງຕົວຢ່າງຂອງວິທີການໃຊ້ json ພາຍໃນຂອງແຟ້ມ.

ສິ່ງ ທຳ ອິດທີ່ທ່ານຕ້ອງເຮັດຄືສ້າງເອກະສານດ້ວຍ .json ການຂະຫຍາຍໃນຕອນທ້າຍຂອງມັນ.

ພວກເຮົາ ກຳ ລັງຈະສ້າງ user.json file ທີ່ມີ object object ທີ່ເປັນຕົວແທນຂອງ JSON.

ເພື່ອສ້າງວັດຖຸພວກເຮົາຕ້ອງໄດ້ໃຊ້ການເປີດແລະປິດວົງເລັບ curly {} ແລະຫຼັງຈາກນັ້ນພາຍໃນນັ້ນພວກເຮົາຈະເອົາທຸກຄູ່ທີ່ມີຄ່າ ສຳ ຄັນທີ່ເປັນຈຸດປະສົງຂອງພວກເຮົາ.

ທຸກໆຊັບສິນດຽວພາຍໃນ JSON ແມ່ນຄູ່ຄ່າທີ່ ສຳ ຄັນ. ຄີຕ້ອງຖືກລ້ອມຮອບດ້ວຍສອງເທົ່າ '' ວົງຢືມຕາມດ້ວຍຈໍ້າສອງເມັດ : ແລະຫຼັງຈາກນັ້ນມູນຄ່າ ສຳ ລັບກຸນແຈນັ້ນ.

ຖ້າພວກເຮົາມີຫລາຍຄູ່ທີ່ມີຄ່າ ສຳ ຄັນ, ພວກເຮົາຕ້ອງການເຄື່ອງ ໝາຍ ຈຸດ , ແຍກທຸກຄູ່ທີ່ມີຄຸນຄ່າ ສຳ ຄັນຂອງພວກເຮົາ, ຄ້າຍຄືກັນກັບວິທີທີ່ພວກເຮົາຈະສ້າງຂບວນໃນພາສາການຂຽນໂປແກຼມ ທຳ ມະດາ.

ຕົວຢ່າງ 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': [...]
}] }

ໃນຕົວຢ່າງຂ້າງເທິງ, ພວກເຮົາມີເອກະສານທີ່ເອີ້ນວ່າ user.json. ພາຍໃນເອກະສານພວກເຮົາມີປະເພດຂໍ້ມູນທີ່ແຕກຕ່າງກັນ.

ຂໍກະແຈຖືກລ້ອມຮອບດ້ວຍ ຄຳ ເວົ້າຄູ່. ສຳ ລັບຄ່າຕ່າງໆ, ມີພຽງແຕ່ປະເພດສາຍສະຕິງເທົ່ານັ້ນທີ່ຖືກອ້ອມຮອບດ້ວຍວົງຢືມຄູ່

ໃນຕົວຢ່າງ:

ຊື່ແມ່ນ string
ອາຍຸແມ່ນ integer
isProgrammer ແມ່ນ boolean
ອະດິເລກເປັນ Array
ຫມູ່ແມ່ນ an Array of Objects

ຫມາຍເຫດ:ບໍ່ມີເຄື່ອງ ໝາຍ ຈຸດໃນຕອນທ້າຍຂອງຊັບສິນສຸດທ້າຍໃນເອກະສານ JSON ຫຼືວັດຖຸ JSON.

ວິທີການໃຊ້ JSON String ພາຍໃນ JavaScript

ສົມມຸດວ່າພວກເຮົາມີແຟ້ມ JSON ທີ່ເອີ້ນວ່າ companies.json ເຊິ່ງແມ່ນຂບວນການຂອງວັດຖຸຂອງບໍລິສັດ:

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

ໃນຕົວຢ່າງຂ້າງເທິງ, ພວກເຮົາມີສອງວັດຖຸຂອງບໍລິສັດພາຍໃນອາຄານ JSON.

ຕອນນີ້ລອງເບິ່ງວ່າພວກເຮົາສາມາດໃຊ້ JSON ຂ້າງເທິງນີ້ຢູ່ໃນ JavaScript ໄດ້ແນວໃດ.

ໃນສະຖານະການສ່ວນໃຫຍ່, ພວກເຮົາໄດ້ຮັບ JSON ເປັນສາຍສະຫຼັກແທນທີ່ຈະແມ່ນວັດຖຸ JSON. ເພື່ອເຮັດຕາມແບບນີ້, ພວກເຮົາເປັນຕົວແທນຂອງ JSON ຂ້າງເທິງນີ້ເປັນສາຍພາຍໃນ JavaScript.

ເອກະສານ html ຂອງພວກເຮົາເບິ່ງຄືວ່າ:


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

ເມື່ອພວກເຮົາກວດເບິ່ງ console log ໃນເຄື່ອງມືພັດທະນາ Chrome, ຜົນໄດ້ຮັບແມ່ນຄ້າຍຄືກັບສິ່ງທີ່ສະແດງຢູ່ດ້ານລຸ່ມ:

ຕົວຢ່າງ JSON javascript

ຈາກນັ້ນພວກເຮົາສາມາດໄຈ້ແຍກ JSON ຂ້າງເທິງໂດຍລະບຸສິ່ງທີ່ພວກເຮົາຕ້ອງການສະກັດ. ຕົວຢ່າງ: ຖ້າພວກເຮົາຕ້ອງການເອົາຊື່ຂອງບໍລິສັດ ທຳ ອິດໃນແຖວທີ່ພວກເຮົາຈະ ນຳ ໃຊ້:

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

ເຊັ່ນດຽວກັນ, ເພື່ອໃຫ້ໄດ້ຄະແນນຂອງບໍລິສັດທີສອງທີ່ພວກເຮົາຈະ ນຳ ໃຊ້:

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

ວິທີການປ່ຽນວັດຖຸ JavaScript ເປັນ JSON

ຕອນນີ້ສົມມຸດວ່າພວກເຮົາມີວັດຖຸ JavaScript ຄືກັບສິ່ງທີ່ສະແດງຢູ່ດ້ານລຸ່ມ:


 JSON Example

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

ເພື່ອປ່ຽນຈຸດປະສົງຂອງບຸກຄົນ JavaScript ໃຫ້ JSON ທີ່ພວກເຮົາໃຊ້ stringify ວິທີການ:

jsonPerson = JSON.stringify(person);

ຜົນໄດ້ຮັບແມ່ນ JSON ທີ່ຖືກຕ້ອງ:

{
'name': 'Brad',
'age': 35 }

ຫມາຍເຫດ:console.log(jsonPerson.name) ການພິມ ບໍ່ມີ ກຳ ນົດ . ເພື່ອໃຫ້ໄດ້ຄຸນຄ່າ, ພວກເຮົາຕ້ອງປ່ຽນ JSON ກັບວັດຖຸ JavaScript.

ເພື່ອເຮັດວຽກຂ້າງເທິງນີ້, ພວກເຮົາ ຈຳ ເປັນຕ້ອງປ່ຽນ JSON ກັບວັດຖຸ JavaScript.

ວິທີການປ່ຽນວັດຖຸ JSON ເປັນ JavaScript

ເພື່ອປ່ຽນວັດຖຸ JSON ຂ້າງເທິງນີ້ໃຫ້ກັບມາໃຊ້ກັບ JavaScript, ພວກເຮົາໃຊ້ parse ວິທີການ:

jsPerson = JSON.parse(jsonPerson) ຫມາຍເຫດ:ດຽວນີ້ຖ້າພວກເຮົາພະຍາຍາມ console.log(jsPerson.name) ພວກເຮົາໄດ້ຮັບ 'Brad'.

ຕົວຢ່າງທີ່ສົມບູນ


  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

ບົດສະຫຼຸບ

JSON ຫຍໍ້ມາຈາກ Javascript Object Notation
ຮູບແບບການແລກປ່ຽນຂໍ້ມູນ - ເບົາ
ອີງໃສ່ຊຸດຍ່ອຍຂອງ JavaScript
ງ່າຍຕໍ່ການອ່ານແລະຂຽນ
ພາສາທີ່ເປັນເອກະລາດ
ສາມາດແຍກອອກເປັນພາສາການຂຽນໂປແກຼມທີ່ທັນສະ ໄໝ ທີ່ສຸດ

ປະເພດຂໍ້ມູນ:

ເບີ: ບໍ່ມີຄວາມແຕກຕ່າງລະຫວ່າງເລກເຕັມແລະເລື່ອນ
ຊ່ອຍແນ່: ສະຕິງຂອງຕົວອັກສອນ Unicode. ໃຊ້ ຄຳ ເວົ້າຄູ່
ບູລູລານ: ຖືກຫຼືຜິດ
ອາເລ: ບັນຊີລາຍຊື່ສັ່ງ 0 ຫຼືຫຼາຍກວ່າຄ່າໃນ []
ຈຸດປະສົງ: ການເກັບ ກຳ ຂໍ້ມູນທີ່ບໍ່ມີຂອບເຂດຂອງຄູ່ ສຳ ຄັນ / ຄ່າ
ບໍ່ມີ: ຄ່າເປົ່າ

ກົດລະບຽບ JSON Syntax:

ໃຊ້ຄູ່ ສຳ ຄັນ / ຄ່າທີ່ມີຄ່າ - ເຊັ່ນ: {'name': 'value'}
ໃຊ້ ຄຳ ເວົ້າຄູ່ອ້ອມຮອບ ຄີ
ຕ້ອງໃຊ້ປະເພດຂໍ້ມູນທີ່ລະບຸ
ປະເພດເອກະສານແມ່ນ .json
ປະເພດ MIME ແມ່ນ 'Application / json'

ຂ້ອຍຫວັງວ່າເຈົ້າຈະພົບເຫັນການສອນ JSON ນີ້ດ້ວຍ Javascript ທີ່ມີປະໂຫຍດ. ດຽວນີ້ທ່ານສາມາດຂຽນເອກະສານ JSON ທີ່ລຽບງ່າຍແລະສັບສົນແລະພົວພັນກັບສາຍ JSON ພາຍໃນ JavaScript.