JSON Tutorial - រៀនពីរបៀបប្រើ JSON ជាមួយ JavaScript

នៅក្នុងការណែនាំនេះយើងនឹងរៀនអំពីជេសុន។ យើងនឹងនិយាយអំពីរចនាសម្ព័ន JSON ប្រភេទទិន្នន័យផ្សេងៗគ្នានិងវិធីប្រើប្រាស់ JSON នៅខាងក្នុង JavaScript ។

ជេសុនគឺជាគំនិតមួយក្នុងចំណោមគំនិតសំខាន់បំផុតដែលអ្នកអាចរៀនធ្វើជាអ្នកសរសេរកម្មវិធីរឺជា QA ។

ពេញមួយអាជីពសរសេរកម្មវិធីរបស់អ្នកអ្នកនឹងប្រើ JSON គ្រប់ពេលថាតើវាកំពុងបង្កើត API ប្រើប្រាស់ API ឬបង្កើតឯកសារកំណត់សម្រាប់កម្មវិធីរបស់អ្នក។




តើជេសុនគឺជាអ្វី

JSON ដែលតំណាងឱ្យការកំណត់វត្ថុរបស់ចាវ៉ាគឺជាទម្រង់តំណាងទិន្នន័យដែលស្រដៀងនឹង XML ឬ YAML ។

វាត្រូវបានគេប្រើយ៉ាងទូលំទូលាយនៅលើអ៊ិនធឺរណែតស្ទើរតែគ្រប់ API តែមួយដែលអ្នកនឹងចូលប្រើក៏ដូចជាឯកសារដែលបានតំឡើងនិងអ្វីៗដូចជាល្បែងនិងកម្មវិធីនិពន្ធអត្ថបទ។


ឧទាហរណ៍នៃជេសុនៈ

#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 ព្រោះវាមានទម្ងន់ស្រាលណាស់ក្នុងការផ្ញើទៅនិងឆ្លើយតបតាមអ៊ីមែលនិងការឆ្លើយតបដោយសារតែទំហំឯកសារតូច។

វាងាយស្រួលក្នុងការអានបើប្រៀបធៀបទៅនឹងអ្វីដែលដូចជា XML ព្រោះវាស្អាតជាងហើយមិនមានស្លាកបើកនិងបិទជាច្រើនដែលគួរព្រួយបារម្ភ។

JSON ក៏រួមបញ្ចូលយ៉ាងល្អជាមួយ JavaScript ផងដែរពីព្រោះ JSON គ្រាន់តែជាសំណុំរងរបស់ JavaScript ប៉ុណ្ណោះដែលមានន័យថាអ្វីដែលអ្នកសរសេរក្នុង JSON គឺ JavaScript ត្រឹមត្រូវ។


ស្ទើរតែគ្រប់ភាសាសំខាន់ៗទាំងអស់មានបណ្ណាល័យឬមុខងារដែលភ្ជាប់មកជាមួយដើម្បីញែកខ្សែ JSON ទៅជាវត្ថុឬថ្នាក់ភាសានោះ។

នេះធ្វើឱ្យធ្វើការជាមួយទិន្នន័យ JSON ងាយស្រួលបំផុតនៅក្នុងភាសាសរសេរកម្មវិធី។



ប្រភេទទិន្នន័យ JSON

ឥឡូវយើងយល់ពីអ្វីដែលជឺសុនគឺជាអ្វីហើយហេតុអ្វីវាសំខាន់សូមចូលទៅក្នុងវាក្យសម្ពន្ធដែលពាក់ព័ន្ធនិងប្រភេទទិន្នន័យដែល JSON អាចតំណាងបាន។

ដូចដែលយើងដឹង JSON គឺជាទំរង់តំណាងទិន្នន័យដូច្នេះយើងចាំបាច់អាចតំណាងអោយប្រភេទទិន្នន័យជាក់លាក់នៅក្នុងវា។


JSON គាំទ្រដើមៈ

  • ខ្សែអក្សរ
  • លេខ លេខអាចមាននៅក្នុងទំរង់ណាមួយទោះបីវាជាលេខគោលដប់លេខទាំងមូលឬលេខអវិជ្ជមានក៏ដោយសូម្បីតែលេខវិទ្យាសាស្ត្រក៏ដោយ
  • ប៊ូលីន ដែលអាចជាការពិតឬមិនពិត
  • មោឃៈ ដែលសំខាន់តំណាងឱ្យគ្មានអ្វី
  • អារេ ដែលអាចជាបញ្ជីប្រភេទណាមួយខាងលើ
  • វត្ថុ វត្ថុមួយប្រភេទដែលស្មុគស្មាញបំផុតប៉ុន្តែត្រូវបានប្រើច្រើនបំផុតនៅក្នុងជេតស៍ព្រោះវាអនុញ្ញាតឱ្យអ្នកតំណាងទិន្នន័យដែលជាគូតម្លៃសំខាន់


ឧទាហរណ៍ JSON

សូមមើលឧទាហរណ៍អំពីរបៀបប្រើជេសុននៅខាងក្នុងឯកសារ។

រឿងដំបូងដែលអ្នកត្រូវធ្វើគឺបង្កើតឯកសារដោយប្រើ _ _ + _ | ផ្នែកបន្ថែមនៅចុងបញ្ចប់របស់វា។

យើងនឹងបង្កើត .json ឯកសារជាមួយវត្ថុអ្នកប្រើដែលតំណាងថាជា JSON ។


ដើម្បីបង្កើតវត្ថុយើងត្រូវប្រើដង្កៀបបើកនិងបិទអង្កាញ់ user.json ហើយបន្ទាប់មកនៅក្នុងនោះយើងនឹងដាក់គូតម្លៃសំខាន់ៗទាំងអស់ដែលបង្កើតជាកម្មវត្ថុរបស់យើង។

រាល់ទ្រព្យសម្បត្តិតែមួយនៅខាងក្នុងជេសុនគឺជាគូតម្លៃដ៏សំខាន់។ គន្លឹះត្រូវតែព័ទ្ធជុំវិញដោយទ្វេ {} សម្រង់អមដោយសញ្ញា | '' ហើយបន្ទាប់មកតម្លៃសម្រាប់កូនសោនោះ។

ប្រសិនបើយើងមានគូគុណតំលៃច្រើនយើងត្រូវការសញ្ញាក្បៀស : បែងចែករាល់គូនៃតម្លៃសំខាន់ៗរបស់យើងស្រដៀងនឹងរបៀបដែលយើងបង្កើតអារេនៅក្នុងភាសាសរសេរកម្មវិធីធម្មតា។

ឧទាហរណ៍ឯកសារ JSON

,

ក្នុងឧទាហរណ៍ខាងលើយើងមានឯកសារហៅថា called _ + _ | ។ នៅខាងក្នុងឯកសារយើងមានប្រភេទទិន្នន័យផ្សេងៗគ្នា។


កូនសោរតែងតែព័ទ្ធជុំវិញដោយសញ្ញាសម្រង់ទ្វេ។ ចំពោះតម្លៃមានតែប្រភេទខ្សែអក្សរដែលព័ទ្ធជុំវិញដោយសម្រង់ទ្វេ។

ក្នុងឧទាហរណ៍៖

  • ឈ្មោះគឺ #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
  • isProgrammer គឺ string
  • ចំណង់ចំណូលចិត្តគឺជា integer
  • មិត្តភក្តិគឺជា boolean
សម្គាល់ៈមិនមានសញ្ញាក្បៀសនៅចុងបញ្ចប់នៃលក្ខណសម្បត្តិចុងក្រោយនៅក្នុងឯកសារ JSON ឬវត្ថុ JSON ទេ។

វិធីប្រើខ្សែអក្សរជេសុននៅខាងក្នុងចាវ៉ា

ឧបមាថាយើងមានឯកសារ JSON ដែលគេហៅថា Array ដែលជាអារេនៃវត្ថុរបស់ក្រុមហ៊ុន៖

Array of Objects

ក្នុងឧទាហរណ៍ខាងលើយើងមានវត្ថុក្រុមហ៊ុនពីរនៅខាងក្នុងអារេ JSON ។

ឥឡូវនេះសូមមើលពីរបៀបដែលយើងអាចប្រើ JSON ខាងលើនៅក្នុង JavaScript ។

នៅក្នុងសេណារីយ៉ូភាគច្រើនយើងទទួលបាន JSON ជាខ្សែអក្សរជាជាងវត្ថុ JSON ។ ដើម្បីធ្វើត្រាប់តាមនេះយើងតំណាងឱ្យ JSON ខាងលើជាខ្សែអក្សរនៅខាងក្នុង JavaScript ។

ឯកសារ html របស់យើងមើលទៅដូចជាៈ

companies.json

នៅពេលដែលយើងពិនិត្យមើលកុងសូលកុងសូលនៅក្នុងឧបករណ៍អ្នកអភិវឌ្ឍន៍ Chrome លទ្ធផលគឺស្រដៀងនឹងអ្វីដែលបានបង្ហាញខាងក្រោម៖

ឧទាហរណ៍ Javon javascript

បន្ទាប់មកយើងអាចញែក JSON ខាងលើដោយបញ្ជាក់ពីអ្វីដែលយើងចង់ស្រង់ចេញ។ ឧទាហរណ៍ប្រសិនបើយើងចង់ទទួលបានឈ្មោះរបស់ក្រុមហ៊ុនដំបូងគេនៅក្នុងអារេយើងនឹងប្រើ៖

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

ដូចគ្នានេះដែរដើម្បីទទួលបានចំណាត់ថ្នាក់ក្រុមហ៊ុនទី ២ យើងនឹងប្រើៈ


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

វិធីបំលែងវត្ថុ JavaScript ទៅ JSON

ឥឡូវសន្មតថាយើងមានវត្ថុ JavaScript ដូចវត្ថុដែលបានបង្ហាញខាងក្រោមនេះ៖

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

ដើម្បីបំលែងមនុស្ស JavaScript អោយទៅ JSON ដែលយើងប្រើ console.log(JSON.parse(
companies[1].rating )) Output: 4.3
វិធីសាស្ត្រ៖


JSON Example

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

លទ្ធផលគឺ JSON ត្រឹមត្រូវ៖

stringifyសម្គាល់ៈ| _ + _ _ ព្រីន មិនបានកំណត់ ។ ដើម្បីទទួលបានតម្លៃយើងត្រូវតែប្តូរ JSON ត្រឡប់ទៅវត្ថុ JavaScript វិញ។

ដើម្បីធ្វើឱ្យការងារខាងលើយើងត្រូវបំលែង JSON ត្រលប់ទៅវត្ថុ JavaScript វិញ។

វិធីបំលែងវត្ថុ JSON ទៅជា JavaScript

ដើម្បីបំលែងវត្ថុ JSON ខាងលើត្រឡប់ទៅជា JavaScript វិញយើងប្រើ jsonPerson = JSON.stringify(person); វិធីសាស្ត្រ៖

{
'name': 'Brad',
'age': 35 }
សម្គាល់ៈឥឡូវប្រសិនបើយើងបានព្យាយាម console.log(jsonPerson.name) យើងទទួលបាន“ Brad” ។

ឧទាហរណ៍ពេញលេញ

parse

សង្ខេប

  • JSON តំណាងអោយការកំណត់របស់ JavaScript
  • ទ្រង់ទ្រាយផ្លាស់ប្តូរទិន្នន័យស្រាល
  • ផ្អែកលើសំណុំរងនៃ JavaScript
  • ងាយស្រួលអាននិងសរសេរ
  • ភាសាឯករាជ្យ
  • អាចញែកជាភាសាសរសេរកម្មវិធីទំនើបបំផុត

ប្រភេទទិន្នន័យ៖

  • ចំនួន: មិនមានភាពខុសគ្នារវាងចំនួនគត់និងអណ្តែត
  • ខ្សែអក្សរ៖ ខ្សែអក្សរអក្សរយូនីកូដ។ ប្រើសម្រង់ទ្វេដង
  • ប៊ូលីន៖ ត្រូវ​ឬ​ខុស
  • អារេ៖ បញ្ជីដែលបានបញ្ជាទិញនៃតម្លៃ ០ រឺច្រើនជាងនេះនៅក្នុង jsPerson = JSON.parse(jsonPerson)
  • គោលបំណង៖ ការប្រមូលផ្ដុំនៃគូគន្លឹះ / តម្លៃដែលគ្មានព្រំដែន
  • គ្មានន័យ៖ តម្លៃទទេ

ច្បាប់ស៊ី។ អេស។

  • ប្រើគូ / តម្លៃគូ - ឧ។ | _ + _ _
  • ប្រើសញ្ញាសម្រង់ទ្វេជុំវិញ ឃី
  • ត្រូវប្រើប្រភេទទិន្នន័យដែលបានបញ្ជាក់
  • ប្រភេទឯកសារគឺ .json
  • ប្រភេទ MIME គឺ“ Application / json”

ខ្ញុំសង្ឃឹមថាអ្នកបានឃើញថាការបង្រៀន JSON នេះជាមួយ Javascript មានប្រយោជន៍។ ឥឡូវអ្នកអាចសរសេរឯកសារ JSON សាមញ្ញនិងស្មុគស្មាញហើយធ្វើអន្តរកម្មជាមួយខ្សែអក្សរ JSON ខាងក្នុង JavaScript ។

អត្ថបទគួរឱ្យចាប់អារម្មណ៍