Men Bootcampni kodlashdan o'tayotganimda, nima uchun biz ob'ekt ichidagi xususiyatlarga kirishni va massivlar orqali takrorlashni o'rganayotganimizni tushunishga qiynalardim. Hammasi bosilgan paytda men API-larni qanday boshqarishni tushunib yetdim. Ushbu maqolada juda ko'p ma'lumotlar mavjud. Maqsad sizni API bilan ishlash bilan tanishtirishdir, shunda siz ta'lim sayohatingizni boshdan kechirayotganingizda ba'zi usullarni nima uchun o'rganayotganingiz haqida tasavvurga ega bo'lasiz.

Ushbu maqolada biz sizning sayohatingizni vs kodini o'rnatish, tugun va json-serverni o'rnatish, ma'lumotlarning JSON'dan HTMLga qanday o'tishini va JSON ob'ektlari orqali takrorlash uchun forEach usulidan qanday foydalanishimizni o'rganish orqali boshlaymiz.

Bemalol kuzatib boring. Agar sizda o'rnatilgan muhit bo'lmasa, Windows foydalanuvchilari uchun ushbu "qo'llanma" yoki Mac foydalanuvchilari uchun "havola" ga amal qiling. vsCode-ni o'rnatganingizdan so'ng siz ikkita paketni o'rnatishingiz kerak bo'ladi. (E'tibor bering, agar sizda ushbu paketlar o'rnatilgan bo'lsa, "Tushunchalarni ulash" ga o'ting)

Paketlar o'rnatilmoqda

Biz o'rnatadigan paketlar:

nvm install -lts

npm install -g json-server

Buning uchun siz vs kodini ochishingiz va yangi terminalni ochishingiz kerak:

Keyingi terminalda “nvm install -lts” yozing:

Enter tugmasini bosganingizdan so'ng, kompyuteringizda tugunlar kutubxonasi o'rnatilgan bo'ladi.

Shuningdek, npm install -g json-server ni kiritganingizga ishonch hosil qiling va Enter tugmasini bosing.

Endi biz nihoyat kodni ko'rib chiqishga tayyormiz.

VS kodini oching va Fayl ichida ochiq papka…

Shu tarzda biz yangi papka yaratamiz.

Ish stolida sichqonchaning o'ng tugmachasini bosing va yangi papka yarating, unga xohlaganingizcha nom bering va jildni tanlang:

Nihoyat, index.html, script.js va db.json deb nomlanadigan uchta faylni qo'shishimiz kerak bo'ladi:

Kodimizni sozlash

O'rganishning eng yaxshi usuli - bu murakkab kod bloklarini ko'rib chiqish va ular qanday bog'langanligini ko'rishdir. JSON va HTML kod bloklari haqida ko'p tashvishlanmang. Ular faqat havola qilish uchun mavjud. Asosiy e'tibor JavaScript. Kod bloklari ustidagi sarlavhalar biz keyinroq o'xshashlik uchun foydalanamiz. Ushbu kod bloklarini nusxa ko'chiring va yangi yaratilgan fayllaringizga joylashtiring. HTML index.html faylingizga, JavaScript esa script.js faylingizga kirib borishiga ishonch hosil qiling va hokazo.

HTML - AKA fermer xo'jaligi ma'lumotlari oynasi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src = "script.js"></script>
</body>
</html>

JSON - ma'lumotlar manbaiAKA to'g'on

{
  "results": [
      {
        "id": 1,
        "name": "Rick Sanchez",
        "status": "Alive",
        "species": "Human",
        "gender": "Male",
        "bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
        "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
      },
      {
        "id": 2,
        "name": "Morty Smith",
        "status": "Alive",
        "species": "Human",
        "gender": "Male",
        "image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
        "bio": "You are a Morty, mostly because you are the campanion in this story, like being bossed around. When someone asks where you want to go eat you say 'I dont care where' or 'Where ever' and then complain about it later."
      },
      {
        "id": 3,
        "name": "Summer Smith",
        "status": "Alive",
        "species": "Human",
        "gender": "Female",
        "image": "https://rickandmortyapi.com/api/character/avatar/3.jpeg",
        "bio": "You are a Summer, not the the season but the character from the show. the show Rick and morty. this is a fansite of the show. thats why you are here. Unless you clicked on a random link? which means you dont care, which is why you are a Summer, becasue you dont care."
      },
      {
        "id": 4,
        "name": "Beth Smith",
        "status": "Alive",
        "species": "Human",
        "gender": "Female",
        "image": "https://rickandmortyapi.com/api/character/avatar/4.jpeg",
        "bio": "You are Beth, you are probably loving and caring person unless you chose to abandon your kids in season 5 and go become space beth. #spoilers. Also you like wine."
      },
      {
        "id": 5,
        "name": "Jerry Smith",
        "status": "Alive",
        "species": "Human",
        "gender": "Male",
        "image": "https://rickandmortyapi.com/api/character/avatar/5.jpeg",
        "bio": "You are a Jerry, we know why you are here. its ok. actually its not haha this is rick you suck Jerry!"
      }
      ]}

JavaScript - AKA sug'orish ma'lumotlarini manipulyatsiya qilish

const whereWeAppend = document.querySelector("div");

function getCharacters(parameter1){
  fetch(`http://localhost:3000/results${parameter1}`)
  .then (r=> r.json())
  .then (json => json.forEach(data => render(data))
)}

getCharacters("/?_limit=3");

function render(data){
  let picture = document.createElement("img");
  picture.src = data.image;
  whereWeAppend.append(picture);
};

Agar siz json-server (npm install -g json-server) va tugunni (nvm-install -lts) muvaffaqiyatli o'rnatgan bo'lsangiz, ikkita yangi terminal yaratish orqali nima qilganingizni ko'rishingiz mumkin.

Agar sizda ochiq terminal bo'lmasa, yangi terminalni ochish uchun yuqoridagi amallarni bajaring.

Boshqa terminal qo'shish uchun boshqa terminal qo'shish uchun kichik + belgisini bosing.

Endi siz o'zaro almashishingiz mumkin bo'lgan ikkita terminalga ega bo'lasiz.

Terminallardan birida json-server --watch db.json deb yozing

Boshqa terminalda explorer.exe index.html yozing

Esda tutingki, explorer.exe index.html standart brauzeringizni ochmoqda. Mening standart brauzerim Chrome-ga o'rnatilgan. Agar sizda Chrome bo'lmasa, u siz uchun ishlamasligi mumkin.

Qanday hayajonli, endi siz Google Chrome-ga kirganingizda shunday ekranni ko'rishingiz kerak:

Tabriklaymiz!!!!! Bitta qo'llanmada siz tugun paketlarini o'rnatdingiz va JSON-serverdan sahifangizga biror narsa ko'rsatdingiz. Nima bo'layotganini tushunish uchun kodning alohida qismlarini ajratamiz.

Parametrlarni funksiyalarga o'tkazish

Keling, ma'lumotni JSON faylimizdan ekranimizga (HTML) oqishiga imkon beruvchi valf bilan o'ynaymiz. JavaScript faylingizga qarang (script.js). Ushbu faylda siz ushbu kod blokini ko'rasiz:

getCharacters("/?_limit=3");

Agar limit=3 ni limit=5 ga o'zgartirsak, shunday qilib:

getCharacters("/?_limit=5");

Chrome yangilanganda ekranimizda beshta belgi paydo bo'lishini ko'ramiz.

Nimalar bo'lyapti? Biz JSga JSON faylimizdan faqat 5 ta ob'ektga ruxsat berishini aytdik, holbuki biz undan faqat 1 ta ob'ektga ruxsat berishni so'rashimizdan oldin. Agar biz yozgan bo'lsak:

getCharacters("/?_limit=1");

Biz faqat yangilangandan keyin ekranda rickni ko'ramiz. Keling, tushunchalarni tushunishni osonlashtirish uchun buni shunday tutaylik.

Biz ba'zi aloqalarni aniqlashimiz kerak. Ular qayerda? getCharacters - bu biz yuqorida e'lon qilgan funksiya. Biz unga parametr1 deb nomlangan parametrni o'tkazdik.

function getCharacters(parameter1){
  fetch(`http://localhost:3000/results${parameter1}`)
  .then (r=> r.json())
  .then (json => json.forEach(data => render(data))
)}

Ushbu ikkita kod blokini solishtiring. Bir xil ko'rinadigan narsaga e'tibor berdingizmi?

Biz ko'rib chiqmoqchi bo'lgan uchta aloqa mavjud. Ulanishlar quyidagicha ko'rinadi:

1. Birinchidan, getCharacters(“/?_limit=1”) dagi qavslarga e'tibor bering.

2. Keyin (parametr1) degan qavslarga qarang.

3. Nihoyat ${parameter1} ga qarang

JSON-ga getCharacters-dan boshlab ${paramter1}-ga oqib o'tish uchun qancha belgidan foydalanishi kerakligini aytadigan ma'lumotlar oqimi mavjud.

Biz JSga aytmoqchi bo'lgan narsa - /?_limit=1 parametrini parametr1 ga o'tkazish. Bu bizning kodimizda qabul qilinganda, shunday o'qiladi:

fetch(`http://localhost:3000/results/?_limit=1`)

Uni tushunish uchun kod bilan o'ynang.
Kod bilan o'ynaganingizda ctrl + z tugmalarini bosishingiz va o'zgarishlaringizni qaytarishingiz mumkin. Agar siz juda orqaga qaytsangiz, o'zgarishlarni tiklash uchun ctrl + y tugmalarini bosishingiz mumkin. O'zgartirishlaringizni ko'rish uchun Chrome sahifangizni har safar yangilashingiz kerak bo'ladi.

JSON-dan qanday olish mumkin

Agar biz JSON faylimizga qarasak, "natijalar" nomli massivni ko'ramiz:[

{
  "results": [
      {
        "id": 1,
        "name": "Rick Sanchez",
        "status": "Alive",
        "species": "Human",
        "gender": "Male",
        "bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
        "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
      },

Bu massivda birinchi belgi Rik Sanches bo‘lib, bizda “https://rickandmortyapi.com/api/character/avatar/1.jspeg” qiymatiga ega bo‘lgan rasm kaliti mavjud.

Ob'ektlar faqat kalit-qiymat juftliklari. Biz nuqta belgisi yordamida qiymat kalitiga kiramiz. Keling, nuqta belgilari haqida gapiraylik.

Quyidagi kod blokida bizda picture.src = data.image;

picture.src = data.image;

Bu nimani anglatadi, bizning rasmimizda biz manba ma'lumotlarga teng bo'lishini xohlaymiz.image.

data.image nima?

Keling, ulanishlarni ko'rib chiqaylik:

Bizda ikki xil ulanish sodir bo'lmoqda: A ulanishi va B ulanishi.
A1 da natijalarga e'tibor bering va bu A2 natijalariga ulanish. Bizning olib kelishimiz oddiygina localhost:3000/results (ya'ni siz json-server ishga tushirilgan terminalingizda --watch db.json) so'rab db.json-dan massiv natijalariga kirishni so'rashdir. Ikki “.keyin” ga keyinroq boramiz. Bilingki, ma'lumotlar bizning JSON faylimizdan ma'lumotlar deb ataydigan narsaga oqib chiqmoqda.

JSON ma'lumotlarimizdan faqat 1 ta ob'ektga ruxsat berganimiz sababli =:

    {
        "id": 1,
        "name": "Rick Sanchez",
        "status": "Alive",
        "species": "Human",
        "gender": "Male",
        "bio": "You are a Rick Sanchez because you are the main character in your story, most care about youself. You do care about your family but only when you've had some drinks or if they are mad at you.",
        "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
      }

Ikkinchi ulanishimizni ko'rib chiqsak, B1 (bizning ma'lumotlarimiz) B2 ga o'tkaziladi (biz ma'lumotlar deb nomlagan parametrimiz)

Shunday qilib, B3 data.image = da

“https://rickandmortyapi.com/api/character/avatar/1.jpeg”

Agar data.image o'rniga data.name qo'ysak, biz quyidagilarni olamiz:

"Rik Sanches"

Nuqta shunchaki bizning ma'lumotlarimizdagi kalitga kirishdir.

Biz db.json dan rasmimizni shu tarzda olamiz. Keyinchalik, rasmni HTML-ga qanday qo'shishni ko'rib chiqamiz.

Bizning HTML-ga qo'shilish

Endi biz JSON-dan JS-ga ma'lumotni qanday olish kerakligini ko'rdik. Siz eng qiyin qismdan o'tdingiz. Endi bizda uni HTML-ga qo'shishning oson vazifasi bor.

Keling, avval JS ichidagi "const whereWeAppend" ni ko'rib chiqaylik. Divga e'tibor qarating

document.querySelector "HTML hujjatimizga kiring va div deb nomlangan birinchi elementni toping" demoqchi.

Keling, HTML-ni qayta yuklaymiz:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src = "script.js"></script>
</body>
</html>

div yozilgan joyni toping. u HTMLning asosiy qismida joylashgan.

Biz aytmoqchi bo'lgan narsa, WeAppend bizning HTML ichidagi div sifatida o'rnatilgan.

div bizning rasmlarimizni joylashtirishimiz uchun taxta vazifasini bajaradi.

Keling, fotosuratlarni divimizga qanday qo'shayotganimizga e'tibor qarataylik:

Biz birinchi bo'lib .createElement() usuli yordamida tasvir yaratishimiz kerak. Ba'zi rasmga rasm = o'rnatamiz. E'tibor bering, bu rasmda FAQAT rasm shabloniga ega. Rasmdagi haqiqiy tasvirni aniqlash uchun keyingi qatorda picture.src ni bajarishimiz kerak.

Esda tutingki, data.image JSON ob'ektimizdagi "tasvir" kalitidir. Shunday qilib, endi picture.src endi bo'sh ramka emas. Endi unda Rik Sanchesning surati bor.

whereWeAppend biz HTMLda belgilagan div. Undagi .append "rasmni divga qo'ying" deb yozilgan va sizda u bor, endi siz to'liq oqimni ko'rishingiz mumkin. Keling, xulosa qilaylik va bonus sifatida forEach haqida gapiraylik

Bizning axborot daryosi va .forEach

Bu hamma narsa qanday bog'langanligining vizual tasviridir. Umid qilamanki, bu sizga JS ma'lumotni qanday uzatishi haqida tushuncha beradi. So'nggi bir narsaga murojaat qilish kerak. Bu ikkinchi .keyin ichida forEach hisoblanadi.

Biz valfimizni ochganimizda, quyidagilarni bajaramiz:

getCharacters("/?_limit=5")

Endi biz barcha 5 ta belgini HTMLga ko'rsatmoqdamiz. Lekin qanday?

Biz .forEach usulidan foydalanamiz. Bu nimani anglatishini tushunish uchun kodimizni quyidagiga o'zgartirib, uni buzamiz:

.then(json => render(json))

Biz hech qanday tasvirni olmaymiz. Buning sababi shundaki, biz ob'ektlarning butun majmuasini o'tkazishga harakat qilmoqdamiz va bu qutida ma'lumotlar tasvirini topa olmayapmiz, chunki u mavjud emas.

Keling, analogiyadan foydalanamiz:

  1. Render() funksiyasi havoni chiqarishga o'xshaydi.
  2. json qutiga o'xshaydi.
  3. ma'lumotlar qutidagi daryo quvurlariga o'xshash.

Aytaylik, siz daryodan pastga tushish uchun beshta trubkadan iborat quti sotib oldingiz. Agar siz qutini havo bilan pompalamoqchi bo'lsangiz va daryo quvurlari qutisini daryoga tashlamoqchi bo'lsangiz, biz hech qaerga bormasdik. Yuqoridagi .then(json =› render(json)) kodini bajarganimizda, biz qutimizda funktsiyani ishga tushiramiz… yoki aniqrog'i havo bilan to'la qutini pompalaymiz. ForEach usulini ishga tushirganimizda:

.then(json => json.forEach(data => render(data))

Biz har bir ob'ektni qutidan chiqarib, ularda render funktsiyasini ishga tushirishni aytamiz. Yoki bizning o'xshashligimiz bo'yicha har bir naychani qutidan chiqarib oling va har bir alohida naychani pompalang.

qisqa bayoni; yakunida

Siz qilgan hamma narsaga qarang.

  1. O'rnatilgan vs-kod
  2. o'rnatilgan tugun paketlari
  3. JavaScript-ni HTML va JSON bilan qanday bog'lashini ko'ring
  4. forEach usuli haqida bilib oldik

Ushbu darslarning natijasi sizga ko'plab boshqa API-lardan ma'lumotlarni uzatish imkonini beradi, shunda siz ularning ma'lumotlarini veb-saytingizga ko'rsatishingiz mumkin. Ta'limingizni davom ettirsangiz, o'qituvchilaringiz sizga o'rgatayotgan narsalarning foydaliligini tushunib olasiz. Bundan tashqari, agar siz ushbu kod bilan o'ynasangiz, JavaScript qanday ishlashini yaxshiroq tushunasiz.