JSON Parse এবং Data Display

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে JSON ডেটা হ্যান্ডলিং (Handling JSON Data with Ajax) |

JSON ডেটা প্রসেস করার জন্য এবং তা HTML ডকুমেন্টে দেখানোর জন্য JSON.parse() মেথড এবং JavaScript ব্যবহার করা হয়। JSON.parse() মেথড JSON ফরম্যাটের ডেটাকে JavaScript অবজেক্ট বা অ্যারের মধ্যে কনভার্ট করে, যাতে সেই ডেটা দিয়ে DOM ম্যানিপুলেশন বা অন্যান্য কাজ করা যায়। নিচে একটি উদাহরণসহ JSON ডেটা প্রসেস এবং ডিসপ্লে করার ধাপগুলো ব্যাখ্যা করা হলো।

JSON Parse এবং Data Display উদাহরণ

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 Parse and 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/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
            // JSON ডেটা প্রসেস করা
            var data = JSON.parse(xhr.responseText);
            
            // HTML এ ডেটা দেখানো
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</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/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে। "https://jsonplaceholder.typicode.com/posts/1" URL থেকে JSON ডেটা ফেচ করা হবে।
true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

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

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

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

JSON ডেটা থেকে title এবং body প্রপার্টি ব্যবহার করে HTML ডিভ (data-container) আপডেট করা হয়েছে।
ডেটা ডায়নামিকভাবে HTML এ ইনজেক্ট করা হয়েছে, যাতে ব্যবহারকারী পেজ রিলোড ছাড়াই সেই ডেটা দেখতে পারেন।

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

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

JSON Data Example:

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

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}