Blog

JavaScript with JSON – একটি সম্পূর্ণ পরিচিতি (বাংলায়)

JSON (JavaScript Object Notation) হলো এক ধরনের lightweight ডেটা-এক্সচেঞ্জ ফরম্যাট। এটি প্রধানত ওয়েব অ্যাপ্লিকেশনে ডেটা স্টোর এবং ট্রান্সফার করতে ব্যবহার হয়, বিশেষ করে JavaScript ও AJAX এর সাথে। এটি XML এর তুলনায় অনেক হালকা এবং সহজবোধ্য।

JSON কীভাবে কাজ করে?

JSON মূলত একটি JavaScript object-এর স্ট্রিং সংস্করণ। এটি key-value পেয়ার আকারে ডেটা সংরক্ষণ করে এবং বিভিন্ন প্রোগ্রামিং ভাষা সহজেই এটি পার্স করতে পারে।

নিচে একটি সাধারণ JSON Object দেখানো হলো:

{
  "name": "Shahin",
  "age": 25,
  "city": "Dhaka"
}

ব্যাখ্যা: এখানে name, age এবং city হচ্ছে key, এবং প্রতিটির সাথে একটি string বা number value আছে।

JavaScript থেকে JSON তৈরি

আপনি যদি JavaScript এ কোনো অবজেক্টকে JSON স্ট্রিং হিসেবে রূপান্তর করতে চান, তাহলে JSON.stringify() মেথড ব্যবহার করতে হবে।

let student = {
  name: "Rafi",
  age: 20,
  department: "CSE"
};

let jsonString = JSON.stringify(student);
console.log(jsonString);

ব্যাখ্যা: উপরের কোডে student নামক একটি অবজেক্টকে JSON.stringify() দিয়ে JSON স্ট্রিং এ কনভার্ট করা হয়েছে।

JSON String থেকে JavaScript Object এ রূপান্তর

যখন আপনি সার্ভার থেকে JSON ডেটা রিসিভ করবেন, তা সাধারণত স্ট্রিং আকারে থাকবে। সেটিকে অবজেক্টে রূপান্তর করতে JSON.parse() ব্যবহার করা হয়।

let jsonData = '{"name":"Tania","age":22,"city":"Rajshahi"}';

let obj = JSON.parse(jsonData);
console.log(obj.name);  // Output: Tania

ব্যাখ্যা: JSON স্ট্রিংকে JSON.parse() দিয়ে JavaScript object এ রূপান্তর করা হয়েছে এবং obj.name দিয়ে ডেটা এক্সেস করা হয়েছে।

JSON ও Array একত্রে

JSON এ array ব্যবহার খুবই সাধারণ একটি বিষয়। নিচের উদাহরণটি দেখুন:

{
  "employees": [
    { "name": "Sajib", "age": 28 },
    { "name": "Mitu", "age": 24 },
    { "name": "Nasir", "age": 30 }
  ]
}

উপরের JSON স্ট্রাকচারে একটি “employees” নামক key আছে যার ভ্যালু একটি array, এবং array-এর প্রতিটি আইটেম একটি অবজেক্ট।

এই ডেটা JavaScript এ কিভাবে হ্যান্ডল করবেন?

let data = '{"employees":[{"name":"Sajib","age":28},{"name":"Mitu","age":24}]}';
let obj = JSON.parse(data);

obj.employees.forEach(function(emp) {
  console.log(emp.name + " is " + emp.age + " years old.");
});

ব্যাখ্যা: এখানে আমরা একটি JSON স্ট্রিংকে অবজেক্টে রূপান্তর করেছি এবং forEach() দিয়ে প্রতিটি এমপ্লয়ের নাম ও বয়স দেখিয়েছি।

JSON + AJAX + PHP সংক্ষিপ্ত উদাহরণ

এখন একটি ছোট উদাহরণ দেখি যেখানে JavaScript এর মাধ্যমে AJAX দিয়ে PHP ফাইলে রিকুয়েস্ট পাঠানো হবে এবং PHP থেকে JSON ডেটা রিটার্ন হবে:

JavaScript Code:

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText);
    console.log("Name: " + response.name);
  }
};
xhr.send();

data.php ফাইল:

<?php
$data = array("name" => "Imran", "age" => 26);
echo json_encode($data);
?>

ব্যাখ্যা: JavaScript AJAX দিয়ে data.php ফাইল থেকে JSON ফরম্যাটে ডেটা ফেচ করা হয়েছে এবং JSON.parse() দিয়ে তা object এ রূপান্তর করা হয়েছে।

✅ JSON ব্যবহারের সুবিধা

• সহজ এবং হিউম্যান রিডেবল
• JavaScript এর সাথে ন্যাচারাল সাপোর্ট
• AJAX এবং API ডেটা ট্রান্সফার এ আদর্শ
• অন্যান্য ভাষায় (PHP, Python, Java ইত্যাদি) সহজেই পার্স করা যায়

❗ JSON এর কিছু নিয়ম

• Key অবশ্যই double quotes দিয়ে ঘেরা থাকতে হবে
• JSON ফাইলে কমেন্ট লেখা যায় না
• JSON ফাইল .json এক্সটেনশনে সেভ করতে হয়