coding with ☕️
async function fetchProducts() {
Bu fetchProducts nomli asinxron (asynchronous) funksiyani e'lon qilayapti.
async kalit so‘zi bu funksiyada await dan foydalanish mumkinligini bildiradi.
🧠 Asinxron degani — kod bajarilishi davomida to‘xtab qolmaydi, vaqt talab qiladigan ishlar (masalan: ma’lumot olish) orqa fonda bajariladi.
async kalit so‘zi bu funksiyada await dan foydalanish mumkinligini bildiradi.
🧠 Asinxron degani — kod bajarilishi davomida to‘xtab qolmaydi, vaqt talab qiladigan ishlar (masalan: ma’lumot olish) orqa fonda bajariladi.
coding with ☕️
try { const res = await fetch('https://dummyjson.com/products');
Tushuntirish:
try { ... } – bu yerda xatoliklar yuz berishi mumkinligi uchun try-catch ishlatilgan.
await fetch(...) – internetdan https://dummyjson.com/products manzilidan ma’lumot olib keladi.
fetch – bu ma’lumot olish uchun ishlatiladigan funksiya (API chaqiruvi).
try { ... } – bu yerda xatoliklar yuz berishi mumkinligi uchun try-catch ishlatilgan.
await fetch(...) – internetdan https://dummyjson.com/products manzilidan ma’lumot olib keladi.
fetch – bu ma’lumot olish uchun ishlatiladigan funksiya (API chaqiruvi).
coding with ☕️
const data = await res.json();
Olingan javob (res) JSON (ya’ni ma’lumotlar formatida) bo‘lganligi uchun res.json() qilib uni o‘qish oson formatga aylantiramiz.
data degan o‘zgaruvchida endi obyekt ko‘rinishidagi ma’lumotlar saqlanadi.
data degan o‘zgaruvchida endi obyekt ko‘rinishidagi ma’lumotlar saqlanadi.
coding with ☕️
data.products.forEach(product => {
Tushuntirish:
data.products – bu barcha mahsulotlar ro‘yxati (array).
forEach yordamida biz har bir mahsulot (product) ustida alohida ishlaymiz.
data.products – bu barcha mahsulotlar ro‘yxati (array).
forEach yordamida biz har bir mahsulot (product) ustida alohida ishlaymiz.
coding with ☕️
const card = document.createElement("div"); card.classList.add("card");
document.createElement("div") – yangi <div> elementi yaratadi.
classList.add("card") – bu divga card nomli class qo‘shiladi. 🧠 Bu card – mahsulot kartasi bo‘lib xizmat qiladi.
classList.add("card") – bu divga card nomli class qo‘shiladi. 🧠 Bu card – mahsulot kartasi bo‘lib xizmat qiladi.
coding with ☕️
const img = document.createElement("img"); img.src = product.thumbnail;
img elementi yaratiladi.
Uning src (manba) atributi mahsulotning thumbnail (kichik rasm) manzili bilan to‘ldiriladi.
Uning src (manba) atributi mahsulotning thumbnail (kichik rasm) manzili bilan to‘ldiriladi.
const title = document.createElement("h2");
title.textContent = product.title;
coding with ☕️
const title = document.createElement("h2"); title.textContent = product.title;
h2 sarlavha elementi yaratiladi.
textContent orqali mahsulot nomi yoziladi.
textContent orqali mahsulot nomi yoziladi.
const price = document.createElement("p");
price.textContent = `Price: $${product.price}`;
coding with ☕️
const price = document.createElement("p"); price.textContent = `Price: $${product.price}`;
p (paragraf) elementi yaratiladi.
Unga mahsulot narxi yoziladi, $ belgisi bilan.
Unga mahsulot narxi yoziladi, $ belgisi bilan.
const desc = document.createElement("p");
desc.textContent = product.description;
coding with ☕️
const desc = document.createElement("p"); desc.textContent = product.description;
Yana bir p elementi.
Bu yerda mahsulot tavsifi (description) yoziladi.
Bu yerda mahsulot tavsifi (description) yoziladi.
coding with ☕️
card.append(img, title, price, desc);
Hamma tayyor elementlar (rasm, nom, narx, tavsif) kartaning ichiga qo‘shiladi.