light mode
night mode
On This Page

উদাহরণ সহ JSON ডেটা প্রদর্শন করা

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

JSON ডেটা Ajax এর মাধ্যমে ফেচ করে HTML এ প্রদর্শন করার জন্য XMLHttpRequest এবং JavaScript এর JSON.parse() মেথড ব্যবহার করা হয়। নিচে একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো যেখানে একটি API থেকে JSON ডেটা ফেচ করা হয় এবং তা HTML ডকুমেন্টে ডায়নামিকভাবে দেখানো হয়।

উদাহরণ: JSON ডেটা প্রদর্শন করা

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Data Display Example</title>
</head>
<body>
    <h1>Display JSON Data Using Ajax</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- JSON ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML পেজে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch Data" বোতামে ক্লিক করলে fetchData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে JSON ডেটা নিয়ে আসবে এবং তা প্রসেস করবে।
  • data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে JSON ডেটা ডিসপ্লে করা হবে।

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
            // JSON ডেটা প্রসেস করা
            var user = JSON.parse(xhr.responseText);
            
            // HTML এ ডেটা দেখানো
            document.getElementById("data-container").innerHTML = `
                <h2>User Information</h2>
                <p><strong>Name:</strong> ${user.name}</p>
                <p><strong>Email:</strong> ${user.email}</p>
                <p><strong>Address:</strong> ${user.address.street}, ${user.address.city}</p>
                <p><strong>Phone:</strong> ${user.phone}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("data-container").innerHTML = "Error fetching data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

১. XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।
  • https://jsonplaceholder.typicode.com/users/1 URL থেকে JSON ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা ইউজারের তথ্য JSON ফরম্যাটে প্রদান করে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

৩. JSON ডেটা প্রসেস করা:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • যদি রিকোয়েস্ট সফল হয়, তাহলে JSON.parse(xhr.responseText) মেথড ব্যবহার করে JSON ডেটা JavaScript অবজেক্টে কনভার্ট করা হয়েছে। এটি করলে আমরা JSON ডেটার প্রপার্টিগুলোর ভ্যালুতে সহজেই অ্যাক্সেস করতে পারি।

৪. HTML DOM আপডেট করা:

  • JSON ডেটা থেকে প্রাপ্ত ইউজারের তথ্য HTML এ ইনজেক্ট করা হয়েছে। এখানে ইউজারের নাম, ইমেইল, ঠিকানা, এবং ফোন নম্বর দেখানো হয়েছে।

৫. এরর ম্যানেজমেন্ট:

  • যদি রিকোয়েস্ট ব্যর্থ হয় (যেমন status !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

JSON Data Example:

এই উদাহরণে আমরা JSONPlaceholder API ব্যবহার করেছি যা নিচের মতো JSON ডেটা প্রদান করে:

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874"
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
    }
}

JSON ডেটা প্রসেস এবং প্রদর্শন করার ধাপ:

  1. Ajax রিকোয়েস্ট পাঠানো: XMLHttpRequest ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে।
  2. JSON ডেটা রিসিভ করা: সার্ভার থেকে JSON ডেটা রিসিভ হলে তা JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।
  3. HTML DOM আপডেট করা: JSON ডেটা থেকে প্রয়োজনীয় ইনফরমেশন নিয়ে HTML ডিভ আপডেট করা হয়েছে, যাতে ইউজারের তথ্য ডায়নামিকভাবে পেজে দেখানো যায়।

সারসংক্ষেপ:

  • Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট: XMLHttpRequest অবজেক্ট ব্যবহার করে GET রিকোয়েস্ট পাঠিয়ে JSON ডেটা ফেচ করা হয়েছে।
  • JSON.parse(): JSON স্ট্রিংকে JavaScript অবজেক্টে কনভার্ট করতে ব্যবহৃত হয়েছে, যাতে ডেটা প্রসেস এবং ডিসপ্লে করা যায়।
  • ডেটা ডিসপ্লে: JSON ডেটা থেকে ভ্যালু নিয়ে HTML ডিভে ইনজেক্ট করা হয়েছে, যাতে ব্যবহারকারীরা ডেটা দেখতে পারেন।

এই উদাহরণটি অনুসরণ করে Ajax এর মাধ্যমে JSON ডেটা ফেচ, প্রসেস, এবং HTML এ দেখানোর প্রক্রিয়া সহজে বোঝা যায়। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করতে সাহায্য করে।

আরও দেখুন...

On This Page

or

Don't have an account? Register

Promotion