JSON va HTML
JSON tahlil qilingandan so‘ng, olingan JavaScript qiymatlari HTMLda ko‘rsatilishi mumkin.
Siz alohida qiymatlarni, obyektlarni, massivlarni, ro‘yxatlarni va jadvallarni ko‘rsatishingiz mumkin.
Xususiyatni ko‘rsatish
Parse qilingan JSON obyekti JavaScript obyektiga aylanadi.
Obyekt xususiyatlari oddiy JavaScript sintaksisi bilan ko‘rsatilishi mumkin.
Misol
const text = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(text);
document.getElementById("demo").textContent = person.name;
Bir nechta xususiyatni ko‘rsatish
Bir nechta xususiyatlarni bitta matn qiymatiga birlashtirish mumkin.
Misol
const text = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(text);
document.getElementById("demo").textContent =
person.name + ", " + person.age + ", " + person.city;
Obyektni ko‘rsatish
Obyektni to‘g‘ridan-to‘g‘ri ko‘rsatish uning barcha xususiyatlarini ko‘rsatmaydi.
Misol
const person = {name: "John", age: 30};
myDisplayer(person);
Natija:
[object Object]
O‘zingiz sinab ko‘ring »
Butun obyektni JSON matni sifatida ko‘rsatish uchun JSON.stringify()’dan foydalaning.
Misol
const person = {name: "John", age: 30};
let text = JSON.stringify(person)
myDisplayer(text);
O‘zingiz sinab ko‘ring »
JSON matnini formatlash
JSON.stringify()’ning uchinchi parametri JSON’ni chekinishlar (indentation) bilan formatlashi mumkin.
Bo‘shliqlar va qator uzilishlarini saqlash uchun HTML
elementidan foydalaning.
Misol
<pre id="demo"></pre>
<script>
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").textContent =
JSON.stringify(person, null, 2);
</script>
JSON massivini ko‘rsatish
Parse qilingan JSON massivi JavaScript massiviga aylanadi.
Array qiymatlariga ularning indeks raqamlari orqali kirish mumkin.
Misol
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
document.getElementById("demo").textContent = cars[0];
Array indexes start at zero.
Massivning barcha qiymatlarini ko‘rsatish
For...of sikli massivdagi har bir qiymatni o‘qiy oladi.
Misol
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
let output = "";
for (const car of cars) {
output += car + "\n";
}
document.getElementById("demo").textContent = output;
Qator uzilishlarini ko‘rsatish uchun <pre> elementidan foydalaning.
Massivni ro‘yxat sifatida ko‘rsatish
JavaScript JSON massividagi qiymatlar uchun HTML elementlarini yaratishi mumkin.
Misol
<ul id="demo"></ul>
<script>
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
const list = document.getElementById("demo");
for (const car of cars) {
const item = document.createElement("li");
item.textContent = car;
list.appendChild(item);
}
</script>
Obyektlar massivini ko‘rsatish
JSON ko‘pincha obyektlar majmuasini o‘z ichiga oladi.
products.json
[
{"name":"Laptop","price":899},
{"name":"Mouse","price":29},
{"name":"Keyboard","price":79}
]
Har bir obyektdan xususiyatni ko‘rsatish uchun sikldan foydalaning.
Misol
<ul id="demo"></ul>
<script>
const text = `[
{"name":"Laptop","price":899},
{"name":"Mouse","price":29},
{"name":"Keyboard","price":79}
]`;
const products = JSON.parse(text);
const list = document.getElementById("demo");
for (const product of products) {
const item = document.createElement("li");
item.textContent = product.name + ": $" + product.price;
list.appendChild(item);
}
</script>
JSON’ni jadvalda ko‘rsatish
Obyektlar massivi HTML jadvali sifatida ko‘rsatilishi mumkin.
Misol
<table id="demo" class="ws-table-all">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</table>
<script>
const products = [
{name: "Laptop", price: 899},
{name: "Mouse", price: 29},
{name: "Keyboard", price: 79}
];
const table = document.getElementById("demo");
for (const product of products) {
const row = table.insertRow();
const nameCell = row.insertCell();
const priceCell = row.insertCell();
nameCell.textContent = product.name;
priceCell.textContent = "$" + product.price;
}
</script>
Misol har bir mahsulot uchun bitta jadval qatorini yaratadi.
Ichma-ich JSON’ni ko‘rsatish
JSON obyektlari va massivlari ichma-ich joylashgan qiymatlarni o‘z ichiga olishi mumkin.
Misol
const text = `{
"name": "John",
"address": {
"city": "New York",
"country": "USA"
}
}`;
const person = JSON.parse(text);
document.getElementById("demo").textContent =
person.address.city;
Ichki obyekt bo‘ylab harakatlanish uchun har bir xususiyat nomidan foydalaning.
JSON’ni yuklash va ko‘rsatish
fetch() metodi JSON’ni fayldan yoki serverdan yuklashi mumkin.
Tahlil qilingan ma’lumotlar HTMLda ko‘rsatilishi mumkin.
Misol
<p id="demo"></p>
<script>
async function loadCustomer() {
try {
const response = await fetch("customer.json");
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const customer = await response.json();
document.getElementById("demo").textContent =
customer.name + ", " + customer.city;
}
catch(err) {
document.getElementById("demo").textContent = err.message;
}
}
loadCustomer();
</script>
response.json() metodi JSON’ni allaqachon parse qiladi.
Uning natijasini JSON.parse()’ga uzatmang.
textContent yoki innerHTML?
textContent xususiyati qiymatlarni oddiy matn sifatida ko‘rsatadi.
innerHTML xususiyati uning qiymatini HTML sifatida izohlaydi.
| Xususiyat | Use |
|---|---|
| textContent | Matn va ishonchsiz ma’lumotlarni ko‘rsatish |
| innerHTML | Ilovangiz nazorat qiladigan HTML’ni qo‘shish |
Ishonchsiz JSON qiymatlarini bevosita innerHTML ichiga kiritmang.
Qiymatlar kiruvchi yoki xavfli HTMLni o‘z ichiga olishi mumkin.
Safer
element.textContent = customer.name;
Xavfli bo‘lishi mumkin
element.innerHTML = customer.name;
Mavjud bo‘lmagan xususiyatlar
JSON obyekti barcha kutilgan xususiyatni o‘z ichiga olmaydi.
Null birlashtiruvchi operator standart qiymatni berishi mumkin.
Misol
const person = {name: "John"};
document.getElementById("demo").textContent =
person.city ?? "Unknown city";
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!