JSON Malayalam Tutorial - JSON മലയാളം

JSON

ഏതൊരു പ്രോഗ്രാമറെയും സംബന്ധിച്ചിടത്തോളം ഏറ്റവും പ്രാധാന്യമുള്ളതും, ഉപകാരപ്രദവുമായ ഒരു ടെക്നോളജിയാണ് ജയ്സൺ.

എന്താണ് JSON, 

എന്തിന് JSON  അറിയണം,

JSON എഴുതേണ്ട രീതി 

മാത്രമല്ല ഏറ്റവും അവസാനമായി JSON ഉദാഹരണങ്ങളും കാണാവുന്നതാണ്.

JSON   അതായത് Javascript Object Notaion -  എന്നത്  ഡാറ്റ സൂക്ഷിച്ചു വെക്കാനും,  വിതരണം ചെയ്യാനും, എളുപ്പത്തിൽ വായിക്കാനും ഉള്ള ഒരു ഫോർമാറ്റ് മാത്രമാണ്.

 നമ്മുടെ XML . അല്ലെങ്കിൽ YAML  പോലെ തന്നെയാണ് സംഭവം.

 ഇൻറർനെറ്റ് ലോകത്തിലുള്ള ഒരുമാതിരി എല്ലാ API കളും - അങ്ങോട്ടുമിങ്ങോട്ടും ഡാറ്റ പങ്കുവയ്ക്കാൻ ഉപയോഗിക്കുന്നത് JSON തന്നെയാണ്.

അത് മാത്രമല്ല കോൺഫിഗറേഷൻ ഫയലുകൾ,  settings  ഫയലുകൾ തുടങ്ങിയവയെല്ലാം JSON ഉപയോഗിക്കുന്നു.

ഇത് വ്യാപകമായി  ഉപയോഗിക്കപ്പെടുന്നത് വെറുതെയല്ല.

 വളരെ ചെറിയ ഫയൽ സൈസ്,

 എളുപ്പത്തിൽ വായിക്കാൻ സാധിക്കും,

കണ്ടാൽ അല്പം  മെനയുണ്ട് ക്ലീൻ ആയിട്ടിരിക്കും, XML പോലെ ഓപ്പണിങ് ക്ലോസിങ് ടാഗുകൾ  കൊണ്ട് നിറഞ്ഞിരിക്കുന്നില്ല.

മറ്റൊരു പ്രധാന കാര്യം ജാവ സ്കിറ്റുമായി ചേർന്ന് വളരെ എളുപ്പത്തിൽ ഇത് പ്രവർത്തിക്കുന്നത് ഉള്ളതാണ്. കാരണം ഇത് JAVASCRIPT ൻ്റെ ഒരു SUBSET ആണ്.

 അതുകൊണ്ടുതന്നെ JSON  ഫയലുകൾ വളരെ എളുപ്പത്തിൽ JavaScript മായി ചേർന്ന് പ്രവർത്തിക്കുന്നു.

മാത്രമല്ല ഭൂമിയിലുള്ള മിക്കവാറും എല്ലാ പ്രോഗ്രാമിംഗ് ലാംഗ്വേജുകൾക്കും JSON   മനസ്സിലാക്കാനും, 

അത് ഒബ്ജക്ടും,  ക്ലാസും ഒക്കെയായി മാറ്റാനുള്ള സംവിധാനമുണ്ട്.

അതുകൊണ്ടുതന്നെ JSON ഉപയോഗിക്കുന്നത് വളരെ എളുപ്പമാണ്.  JSON   എന്ന  ഫോർമാറ്റിനോട് എന്തെങ്കിലും  ഇഷ്ടക്കുറവ് ഉണ്ടെങ്കിലും അങ്ങനെ എളുപ്പം ഒഴിവാക്കാൻ സാധിക്കുന്നതല്ല ഇവൻ.  

ഒരു പ്രോഗ്രാമർ, എങ്ങനെയൊക്കെയാണെങ്കിലും JSON നോട് ഇടപെടേണ്ടതായിട്ട് വരും.

അത് എപിഐ(API) ഉണ്ടാക്കുന്ന സമയത്താണെങ്കിലും,

ഉപയോഗിക്കുന്ന സമയത്താണെങ്കിലും,

ഡാറ്റ സൂക്ഷിക്കുന്ന സമയത്താണെങ്കിലും JSON  ഉപയോഗിക്കേണ്ടതായി വരും.

ആമുഖമൽപം കൂടി പോയെന്ന് അറിയാമെങ്കിലും നേരെ JSON ഫോർമാറ്റിലേക്ക് പോയി എങ്ങനെയാണ് സംഭവം  എഴുതുക എന്ന് നോക്കാം.

നേരത്തെ പറഞ്ഞതുപോലെ JSON  ഡേറ്റ സൂക്ഷിക്കാൻ സഹായിക്കുന്നു.  അപ്പോൾ ഏതൊക്കെ തരം ഡേറ്റയാണ് സൂക്ഷിക്കാൻ സാധിക്കുക.

 ജയ്സൺ സപ്പോർട്ട് ചെയ്യുന്ന ചില ഡേറ്റ  ഫോർമാറ്റുകളാണ്

•  STRING 
•  നമ്പറുകൾ
•  ബൂളിയൻ
•  Null 
•  അറൈകൾ(ഈ സാധനം [ ] കണ്ടാൽ പെട്ടെന്ന് തന്നെ Array  ആണെന്ന് മനസ്സിലാക്കാം [0] )
•  ഒബ്ജക്ടുകൾ -  (കീ വാല്യു  പെയറുകളാണ്.  അതായത്  ഒരു കീയും അതിനോട് ബന്ധിക്കപ്പെട്ടിട്ടുള്ള ഒരു വാല്യവും,  ഉദാഹരണം വയസ്സ്: 30 )

OBJECT ആണെങ്കിൽ മുകളിൽ പറഞ്ഞ മിക്കവാറും എല്ലാ സംഭവങ്ങളും അതിൻറെ വാല്യുവായി വരാം.

ഇനി നമുക്ക് ഒരു ഉദാഹരണം നോക്കിയാലോ.

JSON ഫയലുകൾ സേവ് ചെയ്യുന്നത്  ഫയലിന്റെ പേരെഴുതി, അവസാനം ഡോട്ട് JSON എന്ന ചേർത്താണ്.

 ഉദാ: firstfile.json

 ഇനിയിപ്പോൾ ഈ ഫയൽ തുറന്നു നേരത്തെ മുതൽ പറഞ്ഞ ഏതെങ്കിലും ഒരു തരത്തിലുള്ള  സംഭവം ചേർക്കാം. 

 സാധാരണ രീതിയിൽ json  ഫയലിൽ ഒരു  ‘പേരൻ്റ് -  ARRAY’ അല്ലെങ്കിൽ ‘പേരൻ്റ്  Object’  എഴുതി,  അതിൻറെ  ഉള്ളിലാണ് വിവരങ്ങൾ ചേർക്കാറുള്ളത്.

 ഇനി നമുക്ക് ഒരു user.json എന്ന ഫയൽ എഴുതി നോക്കാം.

ഇതൊരു ഒബ്ജക്ട് ആയിട്ടാണ് നമ്മൾ എഴുതുന്നത്.

ഒബ്ജക്റ്റ് എഴുതുമ്പോൾ ഒരു ഓപ്പണിങ് ചുരുളി ബ്രാക്കറ്റും,  ക്ലോസിങ് ചുരുളി ബ്രാക്കറ്റും എഴുതി അതിനുള്ളിലാണ് എഴുതുക.

ഇനി ഇതിനുള്ളിൽ നമ്മൾ എല്ലാ കീ ജോഡികളുംഎഴുതുന്നതാണ്. 

{


“Key”: “value”,

“Key”: “value”,


}

ഇവിടെ എപ്പോഴും key പാർട്ട് ഡബിൾ കോട്ടിനുള്ളിൽ “” ആയിരിക്കണം.  

ഒന്നിലധികം കീ,  വാല്യു പെയറുള്ളപ്പോൾ  കോമ ചേർത്ത് ഓരോന്നും  വേർതിരിക്കേണ്ടതാണ്.

ഉദാ:

{


“name”: “Asif,

“age”: 3,

“isprogrammer” : true,

“Hobbies”: [ “comedy”, “sleeping”],

“Friends”:  [ ]


}

നേരത്തെ നമ്മൾ കണ്ടതുപോലെ കീ വാല്യൂ എന്നിങ്ങനെ രണ്ട് ഭാഗമാണ് ഉള്ളത്.  ഇതിൽ കീ ഭാഗത്തിന് എപ്പോഴും ഡബിൾ കോട്ട് “” നൽകേണ്ടതാണ്.

എന്നാൽ വാല്യൂ പാർട്ട് സ്ട്രിംഗ്(text) ആണെങ്കിൽ മാത്രം ഡബിൾ കോട്ടിനുള്ളിൽ ആക്കിയാൽ മതി. 

Boolien, നമ്പർ തുടങ്ങിയവ ആണെങ്കിൽ കൂട്ടിനുള്ളിൽ  കയറ്റേണ്ട ആവശ്യമില്ല.

ഏറ്റവും അവസാനം ആകുമ്പോൾ കോമ ഇടേണ്ട ആവശ്യമില്ല.

ഇനിയിപ്പോൾ ഇത് സേവ് ചെയ്താൽ നമുക്ക് user.json എന്ന ഒരു json ഫയൽ കിട്ടുന്നതാണ്.

പക്ഷേ മറ്റൊരു ഉദാഹരണം കൂടി നോക്കി അത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നും JavaScript ഉപയോഗിച്ച് എങ്ങനെ ഇതിനുള്ളിലെ ഡേറ്റ ഉപയോഗിക്കാം എന്നുകൂടെ നോക്കിയാലേ ഈ ഉദാഹരണം പൂർത്തിയാകൂ.

Companies.json

കുറെ  കമ്പനികളുടെ വിവരങ്ങൾ സൂക്ഷിക്കാൻവേണ്ടി ഒരു ജയ്സൺ ഫയൽ ഉണ്ടാക്കുകയാണ് നമ്മൾ.

മുൻപത്തേതിൽ നിന്ന് വ്യത്യസ്തമായി ഇപ്രാവശ്യം ഒരു  Array ക്കുള്ളിലാണ് നമ്മൾ മുഴുവൻ ഡേറ്റയും സൂക്ഷിക്കുന്നത്.

കുറെയധികം objectl കൾക്കുള്ളിലുള്ള ഒരു Array. അതാണ് നമ്മൾ ഇവിടെ ചെയ്യുന്നത്.

[

{

"name": "ABC Inc.",

"numberOfEmployees": 1000,

"CEO": "John Smith",

"rating": 4.5

},

{

"name": "XYZ Co.",

"numberOfEmployees": 500,

"CEO": "Jane Doe",

"rating": 4.2

},

{

"name": "123 Enterprises",

"numberOfEmployees": 1500,

"CEO": "Bob Johnson",

"rating": 4.8

},

{

"name": "Tech Innovators Ltd.",

"numberOfEmployees": 800,

"CEO": "Alice Williams",

"rating": 4.6

}

]

ഇനി നമുക്ക്  ഈ companies.json ഉപയോഗിക്കാൻ വേണ്ടി ഒരു index.html 

എന്ന ഫയൽ ഉണ്ടാക്കാം.

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Company Details</title>

</head>


<body>

<script type=”text/javascript”>


[

    {

      "name": "ABC Inc.",

      "numberOfEmployees": 1000,

      "CEO": "John Smith",

      "rating": 4.5

    },

    {

      "name": "XYZ Co.",

      "numberOfEmployees": 500,

      "CEO": "Jane Doe",

      "rating": 4.2

    },

    {

      "name": "123 Enterprises",

      "numberOfEmployees": 1500,

      "CEO": "Bob Johnson",

      "rating": 4.8

    },

    {

      "name": "Tech Innovators Ltd.",

      "numberOfEmployees": 800,

      "CEO": "Alice Williams",

      "rating": 4.6

    }

  ]



 </script>

</body>



</html>

ഈ ഫയലിനുള്ളിൽ സ്ക്രിപ്റ്റ് ടാഗിനുള്ളിൽ നമുക്ക് നേരത്തെ നമ്മൾ തയ്യാറാക്കിയ json ഫയൽ വേണമെങ്കിൽ നേരിട്ട് ആഡ് ചെയ്യാവുന്നതാണ്.

 കാരണം നേരത്തെ പറഞ്ഞതുപോലെ json, ജാവാ സ്ക്രിപ്റ്റിൻ്റെ ഭാഗമായതിനാൽ ഇത് യാതൊരു പ്രശ്നവും ഇല്ലാതെ പ്രവർത്തിക്കുന്നതാണ്.

 ഇവിടെ കമ്പനി എന്ന ഒരു വേരിയബിൾ ആക്കി നമ്മൾ മുഴുവൻ json  ഡാറ്റയും ചേർക്കുന്നു.

 അപ്പോൾ അത് ഇങ്ങനെയാകുന്നതാണ്.

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Company Details</title>

</head>



<body>

<script type=”text/javascript”>



Let companies = [

    {

      "name": "ABC Inc.",

      "numberOfEmployees": 1000,

      "CEO": "John Smith",

      "rating": 4.5

    },

    {

      "name": "XYZ Co.",

      "numberOfEmployees": 500,

      "CEO": "Jane Doe",

      "rating": 4.2

    },

    {

      "name": "123 Enterprises",

      "numberOfEmployees": 1500,

      "CEO": "Bob Johnson",

      "rating": 4.8

    },

    {

      "name": "Tech Innovators Ltd.",

      "numberOfEmployees": 800,

      "CEO": "Alice Williams",

      "rating": 4.6

    }

  ]



console.log(companies);


</script>

</body>


</html>

ഇവിടെ കൺസോൾ ലോഗ്  ചെയ്തു നോക്കിയാൽ ഇത് മുഴുവൻ  ലോഡ് ചെയ്യുമ്പോൾ -  ബ്രൗസർ  കൺസോളിനുള്ളിൽ(right click - inspect) കാണാൻ സാധിക്കുന്നതാണ്.

എന്നാൽ സാധാരണ രീതിയിൽ നമ്മൾ json ഫയലിൽ വർക്ക് ചെയ്യുമ്പോൾ നമുക്ക് json file ഒരു സ്ട്രിംഗ് ആയിട്ടാണ് കിട്ടാറുള്ളത്,  ഇവിടെ നമ്മൾ നേരിട്ടൊരു object  ആയി  ചേർത്തത് പോലെയല്ല കിട്ടുന്നത്.

അങ്ങനെ string ആയി കിട്ടുന്ന json data  ഒബ്ജക്ട് ആക്കി മാറ്റാൻ ഉപയോഗിക്കുന്ന ഫങ്ഷനാണ് JSON.parse.

JSON.parse()  ഇതിനുള്ളിലേക്ക് നമുക്ക് കിട്ടിയ സ്പ്രിംഗ് കടത്തിവിട്ടാൽ അത് ഒബ്ജക്റ്റ് ആയി മാറുന്നതാണ്.

JSON data, JavaScript Object ആയി മാറിക്കഴിഞ്ഞാൽ പിന്നെ, ആ ഡേറ്റ ഉപയോഗിച്ച് നമ്മൾ സാധാരണ ഒരു javascript object ഇൽ ചെയ്യുന്ന എല്ലാ കാര്യങ്ങളും ചെയ്യാവുന്നതാണ്.

Javascript ഒബ്ജക്റ്റുമായി ഏറ്റവും വലിയ വ്യത്യാസം JSON ന് ഉള്ളത് KEY എന്നുപറയുന്ന ഭാഗത്തിന് എപ്പോഴും double Quote ഉണ്ട് എന്നുള്ളതാണ്.