JS JSON से HTML
In this page:
const object = JSON.parse(jsonText);
element.innerHTML = object.property;DOM API से JSON से Elements बनाना
किसी parsed JSON array पर loop करना और, हर item के लिए, document.createElement() कॉल करके properties (जैसे textContent) सेट करना safely असली DOM elements बनाता है -- खासतौर पर textContent यह सुनिश्चित करता है कि किसी भी text को plain text की तरह treat किया जाए, कभी HTML के रूप में interpret न किया जाए।
उदाहरण: Building Elements from JSON with the DOM API
const items = [{ name: "Sam" }, { name: "Amit" }];
const list = document.createElement("ul");
items.forEach(item => {
const li = document.createElement("li");
li.textContent = item.name; // treated as plain text, never HTML
list.appendChild(li);
});
document.body.appendChild(list);Template Literals से एक HTML String बनाना
.map() को एक template literal के साथ मिलाना हर JSON item के लिए एक HTML string बनाता है, फिर .join("") उन्हें innerHTML से डालने के लिए तैयार एक string में मिला देता है -- elements को individually बनाने से ज़्यादा संक्षिप्त, पर किसी untrusted content के लिए manual escaping चाहिए।
उदाहरण: Building an HTML String with Template Literals
// Declare the constant `items`, set to `[{ name: "Sam" }, { name: "Amit" }]`
// Declare the constant `items`, set to `[{ name: "Sam" }, { name: "Amit" }]`
const items = [{ name: "Sam" }, { name: "Amit" }];
// Declare the constant `html`, set to `items.map(item => `<li>${item.name}</li>`).join("")`
// Declare the constant `html`, set to `items.map(item => `<li>${item.name}</li>`).join("")`
const html = items.map(item => `<li>${item.name}</li>`).join("");
// Assign `<ul>${html}</ul>` to `document.body.innerHTML`
// Assign `<ul>${html}</ul>` to `document.body.innerHTML`
document.body.innerHTML = `<ul>${html}</ul>`;एक खाली JSON Array संभालना
एक JSON response में सही तरीके से एक खाली array हो सकती है -- rendering code को इसे explicitly जांचना चाहिए और एक साफ "no results" या "nothing here yet" message दिखाना चाहिए, चुपचाप एक blank area छोड़ने के बजाय जो एक जानबूझकर empty state के बजाय एक bug जैसा दिखे।
उदाहरण: Handling an Empty JSON Array
// Declare the constant `items`, set to `[]`
// Declare the constant `items`, set to `[]`
const items = [];
// Assign `items.length` to `document.body.innerHTML`
// Assign `items.length` to `document.body.innerHTML`
document.body.innerHTML = items.length
? items.map(item => `<p>${item.name}</p>`).join("")
: "<p>No results</p>";Data Changes पर DOM को कुशलता से Update करना
underlying JSON data में थोड़ा सा भी बदलाव होने पर हर बार शुरू से पूरी list को फिर से बनाना बर्बादी है -- बार-बार update होने वाले data के लिए, targeted updates (सिर्फ प्रभावित खास elements बदलना) या एक lightweight diffing approach एक पूरे teardown-and-rebuild से काफी बेहतर perform करता है।
उदाहरण: Updating the DOM Efficiently on Data Changes
function updateItem(id, newText) {
document.querySelector(`[data-id="${id}"]`).textContent = newText; // targeted update, not a full rebuild
}
console.log(typeof updateItem);एक पूरा Fetch-to-HTML Example
हर चीज़ को मिलाकर: JSON fetch करना, loading और error states संभालना, एक खाली result की जांच करना, और data को safely HTML के रूप में render करना -- यह वह पूरा, असली pipeline है जो किसी modern web page के लगभग किसी भी dynamic, data-driven हिस्से को render करने के पीछे है।
उदाहरण: A Complete Fetch-to-HTML Example
// Assign "<p>Loading...</p>" to `document.body.innerHTML`
// Assign "<p>Loading...</p>" to `document.body.innerHTML`
document.body.innerHTML = "<p>Loading...</p>";
// Define the method `fetch` taking `"items.php"`
// Define the method `fetch` taking `"items.php"`
fetch("items.php")
// On success, run this with the resolved value as `r`
// On success, run this with the resolved value as `r`
.then(r => r.json())
// On success, run this with the resolved value as `items`
// On success, run this with the resolved value as `items`
.then(items => {
// Assign `items.length` to `document.body.innerHTML`
// Assign `items.length` to `document.body.innerHTML`
document.body.innerHTML = items.length
? items.map(i => `<p>${i.name}</p>`).join("")
: "<p>No results</p>";
})
.catch(() => document.body.innerHTML = "<p>Failed to load</p>");- JSON-derived text को बिना escape किए सीधे innerHTML में insert करना, जो एक XSS vulnerability खोलता है अगर उस data में कभी embedded HTML या script tags वाला user-generated content हो।
- हर छोटे data update पर पूरी list को शुरू से rebuild करना, जबकि सिर्फ बदले हुए elements को update करना कहीं ज़्यादा efficient होता।
- JSON response से एक empty array को handle करना भूल जाना, एक साफ "no results" message के बजाय एक खाली area छोड़ते हुए।
- JSON data को आमतौर पर उस पर loop करके और हर item के लिए DOM elements या एक HTML string बनाकर HTML में render किया जाता है।
- कोई भी JSON-derived text जिसमें user-generated content हो सकता है, उसे raw innerHTML के बजाय textContent (या escaped) के ज़रिए insert किया जाना चाहिए, XSS से बचने के लिए।
- किसी JSON objects की array से HTML string बनाने के लिए Template literals को .map().join("") के साथ combine करना एक common concise pattern है।
fetched JSON को HTML की तरह render करना सिर्फ standard DOM methods इस्तेमाल करता है, जो हर modern browser में supported हैं।
Chapter Quiz — Complete all 26 topics to unlock
0/26 topics done
Complete these topics first:
- JS JSON
- JS Regular Expressions
- JS Fetch API
- JS LocalStorage and SessionStorage
- JS Cookies
- JS setTimeout and setInterval
- JS Event Loop
- JS Web Workers
- JS Service Workers
- JS AJAX
- JS AJAX Intro
- JS AJAX XMLHttp
- JS AJAX Request
- JS AJAX Response
- JS AJAX XML
- JS AJAX PHP
- JS AJAX Database
- JS JSONP
- JS RegExp Flags
- JS RegExp Classes
- JS RegExp Metachars
- JS RegExp Assertions
- JS RegExp Groups
- JS RegExp Quantifiers
- JS JSON HTML
- JS JSON vs XML