JavaScript এর হাতেখড়ি (পর্ব – ১৫)

JavaScript Part 15

আগের পর্বে আমরা Template Literal ও Arrow Function গভীরভাবে দেখেছি। আজকে শিখবো JSON — ইন্টারনেটে ডেটা আদান-প্রদানের সবচেয়ে জনপ্রিয় ফরম্যাট, এবং Fetch API — যেটা দিয়ে সার্ভার থেকে ডেটা আনা যায়। এই পর্বের পর তুমি বাস্তব API থেকে ডেটা এনে নিজের পেজে দেখাতে পারবে।

JSON কী?

JSON মানে JavaScript Object Notation। এটা দেখতে অবিকল JavaScript object-এর মতোই, কিন্তু এটা আসলে একটা টেক্সট ফরম্যাট — ডেটা এক জায়গা থেকে আরেক জায়গায় (যেমন সার্ভার থেকে ব্রাউজারে) পাঠানোর জন্য ব্যবহার হয়:

{
  "name": "আরিফ",
  "age": 25,
  "isDeveloper": true
}

পর্ব ৮-এ শেখা JavaScript object-এর সাথে এর গঠন প্রায় একই, একটা পার্থক্য হলো — JSON-এ key-গুলো সবসময় ডাবল কোটে লিখতে হয়। প্রায় সব ওয়েব API (Firebase, weather API, বা যেকোনো ব্যাকএন্ড) ডেটা পাঠায় এই ফরম্যাটে।

JSON ↔ JavaScript Object রূপান্তর

JSON আসলে একটা স্ট্রিং, আর JavaScript object আলাদা একটা জিনিস — এই দুইয়ের মধ্যে রূপান্তরের জন্য দুইটা built-in method আছে:

const person = { name: "আরিফ", age: 25 };

// Object থেকে JSON স্ট্রিং
const jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"আরিফ","age":25}'
console.log(typeof jsonString); // string

// JSON স্ট্রিং থেকে ফিরে Object
const backToObject = JSON.parse(jsonString);
console.log(backToObject.name); // আরিফ
console.log(typeof backToObject); // object
Method কাজ
JSON.stringify() JavaScript object → JSON স্ট্রিং
JSON.parse() JSON স্ট্রিং → JavaScript object

Fetch API — সার্ভার থেকে ডেটা আনা

fetch() দিয়ে JavaScript একটা URL-এ রিকোয়েস্ট পাঠাতে পারে এবং সেখান থেকে ডেটা নিয়ে আসতে পারে — ঠিক ব্রাউজারে একটা লিংক ভিজিট করার মতো, কিন্তু কোডের মাধ্যমে:

fetch("https://api.example.com/users")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

এই কোড একটু ভিন্ন দেখতে লাগতে পারে — এখানে .then() ব্যবহার হয়েছে কারণ fetch একটা asynchronous (অ-সমলয়) কাজ — মানে ডেটা সাথে সাথে আসে না, ইন্টারনেট থেকে আনতে কিছুটা সময় লাগে। .then() বলে দেয় — "যখন ডেটা এসে পৌঁছাবে, তখন এই কোড চালাও।"

async/await — সহজ ও আধুনিক লেখার ধরন

.then()-এর বদলে আধুনিক JavaScript-এ async/await বেশি ব্যবহার হয় — এটা asynchronous কোডকে সাধারণ, উপর-থেকে-নিচে পড়া যায় এমন কোডের মতো দেখায়:

const getUsers = async () => {
  const response = await fetch("https://api.example.com/users");
  const data = await response.json();
  console.log(data);
};

getUsers();
কীওয়ার্ড কাজ
async function-এর আগে বসে, বলে দেয় এই function-এর ভেতরে await ব্যবহার হবে
await এই লাইনে থামো, যতক্ষণ না ডেটা এসে পৌঁছায়

টিপস: await শুধু async function-এর ভেতরেই ব্যবহার করা যায়, বাইরে না। এটা একটা কমন beginner ভুল — async ছাড়া function-এ await লিখলে error আসবে।

API থেকে আনা ডেটা DOM-এ দেখানো

এখন পর্যন্ত শেখা সবকিছু (fetch, DOM manipulation, map, template literal) একসাথে মিলিয়ে একটা বাস্তব উদাহরণ দেখা যাক:

<ul id="postList"></ul>

<script>
  const loadPosts = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();

    const firstFive = posts.slice(0, 5); // শুধু প্রথম ৫টা

    const html = firstFive
      .map((post) => `<li>${post.title}</li>`)
      .join("");

    document.getElementById("postList").innerHTML = html;
  };

  loadPosts();
</script>

এখানে jsonplaceholder.typicode.com একটা ফ্রি টেস্ট API, যেটা শেখার জন্য নকল ডেটা দেয়। এই কোড API থেকে পোস্টের লিস্ট আনে, প্রথম ৫টা বেছে নেয় (.slice() দিয়ে), তারপর map+join দিয়ে HTML বানিয়ে পেজে বসায়।

Error Handling — try/catch

ইন্টারনেট কানেকশন না থাকলে বা API কাজ না করলে fetch ব্যর্থ হতে পারে। এই ব্যর্থতা সামলাতে try/catch ব্যবহার করা ভালো অভ্যাস:

const loadPosts = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.log("ডেটা আনতে সমস্যা হয়েছে:", error);
  }
};

loadPosts();

try-এর ভেতরের কোড চেষ্টা করা হয়; কোথাও error হলে, পুরো প্রোগ্রাম ক্র্যাশ না করে catch-এর ভেতরের কোড চলে — এতে ইউজারকে একটা সুন্দর error message দেখানো যায়, সাদা স্ক্রিন বা কনসোল error না দেখিয়ে।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Fetch API উদাহরণ</title>
</head>
<body>
  <h2>সাম্প্রতিক পোস্ট</h2>
  <p id="status">লোড হচ্ছে...</p>
  <ul id="postList"></ul>

  <script>
    const loadPosts = async () => {
      const status = document.getElementById("status");

      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const posts = await response.json();
        const firstFive = posts.slice(0, 5);

        const html = firstFive
          .map((post) => `<li>${post.title}</li>`)
          .join("");

        document.getElementById("postList").innerHTML = html;
        status.textContent = "";
      } catch (error) {
        status.textContent = "পোস্ট লোড করতে সমস্যা হয়েছে";
      }
    };

    loadPosts();
  </script>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. JSON.stringify() ও JSON.parse() দিয়ে একটা object রূপান্তর করে দেখো
  2. উপরের jsonplaceholder.typicode.com/posts থেকে ডেটা এনে console-এ দেখাও
  3. প্রথম ১০টা পোস্টের title একটা HTML লিস্টে দেখাও
  4. ইচ্ছাকৃতভাবে URL-এ ভুল বানান লিখে try/catch-এর error message দেখো

পরের পর্বে যা থাকছে

পর্ব ১৬-এ, সিরিজের শেষ পর্বে, আমরা এখন পর্যন্ত শেখা সবকিছু দিয়ে একটা সম্পূর্ণ Mini Project — একটা To-do List অ্যাপ বানাবো।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম