const box = document.querySelector(".box");
async function fetchUser() {
try {
let res = await fetch("https://jsonplaceholder.typicode.com/users");
let resolve = await res.json();
resolve.forEach((info) => {
// console.log(info);
const card = document.createElement("div");
card.classList.add("card");
let h2 = document.createElement('h2')
let tel = document.createElement('a')
let city = document.createElement('p')
h2.innerHTML = `name: ${info.name}`
tel.innerHTML = `tel: ${info.phone}`
tel.setAttribute('href', `tel: ${info.phone}`)
city.innerHTML = `city: ${info.address.city}`
card.append(h2)
card.append(tel)
card.append(city)
box.append(card)
});
} catch (error) {
console.error(error);
}
}
fetchUser();fetch('https://dummyjson.com/products')
.then(res => res.json())
.then(console.log);const title = document.createElement("h2");
title.textContent = product.title;
const price = document.createElement("p");
price.textContent = `Price: $${product.price}`;
const desc = document.createElement("p");
desc.textContent = product.description;Xulosa (nimalar qilindi):
.box konteyner tanlab olindi.
fetch() orqali API'dan mahsulotlar olindi.
Har bir mahsulot uchun karta yaratildi:
Rasm
Nomi
Narxi
Tavsifi
Bu karta sahifaga chiqarildi.
.box konteyner tanlab olindi.
fetch() orqali API'dan mahsulotlar olindi.
Har bir mahsulot uchun karta yaratildi:
Rasm
Nomi
Narxi
Tavsifi
Bu karta sahifaga chiqarildi.
coding with ☕️
const box = document.querySelector(".box");
document.querySelector(".box") – HTML sahifasida .box classli elementni tanlaydi.
const box – bu elementni box nomli o‘zgaruvchiga saqlaydi.
Endi biz JavaScript orqali shu .box element ichiga boshqa elementlar qo‘shamiz.
const box – bu elementni box nomli o‘zgaruvchiga saqlaydi.
Endi biz JavaScript orqali shu .box element ichiga boshqa elementlar qo‘shamiz.
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.