Când parcurgeam Bootcamp-ul meu de codare, m-am chinuit să înțeleg de ce învățăm cum să accesăm proprietățile dintr-un obiect și să iterăm prin matrice. Momentul în care totul a făcut clic a fost când mi-am dat seama cum să manipulez API-urile. Există o cantitate incredibil de densă de informații în acest articol. Scopul este de a vă introduce în lucrul cu API-urile, astfel încât, atunci când vă parcurgeți călătoria educațională, să aveți o idee despre motivul pentru care învățați unele dintre metode.
În această lucrare, vă vom iniția călătoria instalând vs code, instalând node și json-server, învățând cum circulă datele de la JSON la HTML și cum folosim metoda forEach pentru a itera prin obiectele JSON.
Simțiți-vă liber să urmați. Dacă nu aveți un mediu configurat, urmați acest „ghid” pentru utilizatorii de Windows sau acest „link” pentru utilizatorii de Mac. După ce ați instalat vsCode, va trebui să instalați două pachete. (Rețineți că dacă aveți aceste pachete instalate, treceți la Conectarea conceptelor)
Instalarea pachetelor
Pachetele pe care le vom instala sunt:
nvm install -lts
npm install -g json-server
Pentru a face acest lucru, trebuie să deschideți vs code și să deschideți un nou Terminal:
Apoi, în terminal, tastați „nvm install -lts” astfel:
Odată ce apăsați enter, veți avea biblioteca de noduri instalată pe computer.
Asigurați-vă că introduceți și npm install -g json-server și apăsați enter.
Acum suntem în sfârșit gata să aruncăm o privire la un cod.
Deschide VS Code și în File deschide folderul...
Acesta este modul în care vom crea un folder nou.
În cadrul desktopului, faceți clic dreapta și creați un nou folder, denumiți-l cum doriți și selectați folderul:
În cele din urmă, va trebui să adăugăm trei fișiere care vor fi denumite index.html, script.js și db.json astfel:
Configurarea codului nostru
Cel mai bun mod de a învăța este să te uiți la blocuri de cod complexe și să vezi cum sunt legate între ele. Nu vă faceți griji prea mult cu privire la blocurile de cod JSON și HTML. Sunt acolo doar pentru referință. Accentul principal este JavaScript. Titlurile de deasupra blocurilor noastre de cod sunt cele pe care le vom folosi pentru analogii mai târziu. Copiați și inserați aceste blocuri de cod în fișierele dvs. nou create. Asigurați-vă că HTML intră în fișierul index.html, iar JavaScript intră în fișierul script.js și așa mai departe.
HTML — Fereastra pentru date AKA fermă
<!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 — Sursa datelorAKA baraj
{
"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 — Manipularea datelor AKA irigare
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);
};
Dacă ați instalat cu succes json-server (npm install -g json-server) și node (nvm-install -lts), atunci puteți vedea ce ați realizat făcând două terminale noi.
Dacă nu aveți un terminal deschis, urmați pașii de mai sus pentru a deschide un nou terminal.
Pentru a adăuga un alt terminal apăsați simbolul mic + pentru a adăuga un alt terminal.
Acum veți avea două terminale între care puteți comuta.
Într-unul dintre terminale tastați json-server --watch db.json
În celălalt terminal, tastați explorer.exe index.html
Rețineți că explorer.exe index.html deschide browserul implicit. Am browser-ul meu implicit setat la Chrome. Este posibil să nu funcționeze pentru tine dacă nu ai Chrome.
Cât de interesant, acum ar trebui să vedeți un ecran ca acesta când accesați Google Chrome:
Felicitări!!!!! Într-un tutorial ați instalat pachete de noduri și ați randat ceva de pe serverul JSON pe pagina dvs. Să defalcăm părțile individuale ale codului pentru a înțelege ce se întâmplă.
Trecerea parametrilor în funcții
Să ne jucăm cu supapa care permite informațiilor să curgă din fișierul nostru JSON către ecranul nostru (HTML). Priviți fișierul JavaScript (script.js). În acel fișier, veți vedea acest bloc de cod:
getCharacters("/?_limit=3");
Dacă comutăm limit=3 la limit=5 așa:
getCharacters("/?_limit=5");
Vom vedea cinci caractere care apar pe ecran când reîmprospătăm Chrome.
Ce se întâmplă? Am spus JS să permită doar 5 obiecte din fișierul nostru JSON să treacă, în timp ce înainte i-am cerut să permită doar 1 obiect. Dacă am tastat:
getCharacters("/?_limit=1");
Am vedea Rick pe ecran doar după reîmprospătare. Să o păstrăm așa pentru a face conceptele mai ușor de înțeles.
Trebuie să identificăm unele conexiuni. Unde sunt? getCharacters este o funcție pe care am declarat-o mai sus. Am trecut în el un parametru numit parametru1.
function getCharacters(parameter1){
fetch(`http://localhost:3000/results${parameter1}`)
.then (r=> r.json())
.then (json => json.forEach(data => render(data))
)}
Comparați cele două blocuri de cod. Observați ceva care arată la fel?
Sunt trei conexiuni pe care vrem să le analizăm. Conexiunile arată astfel:
1. Mai întâi, observați parantezele din getCharacters(“/?_limit=1”).
2. Apoi uitați-vă la parantezele care spun (parametrul 1).
3. În cele din urmă, uitați-vă la ${parameter1}
Există un flux de informații care îi spune JSON câte caractere trebuie să treacă, începând de la getCharacters și ajungând la ${paramter1}
Ceea ce îi spunem lui JS să facă este să treacă /?_limit=1 în paramater1. Când acest lucru este transmis în codul nostru, ar citi astfel:
fetch(`http://localhost:3000/results/?_limit=1`)
Joacă-te cu codul pentru a-l înțelege.
Când jucați cu cod, puteți apăsa ctrl + z și puteți anula modificările. Dacă mergeți prea mult înapoi, puteți apăsa ctrl + y pentru a restabili modificările. Pentru a vedea modificările, va trebui să vă reîmprospătați pagina Chrome de fiecare dată.
Cum să obțineți din JSON
Dacă ne uităm la fișierul nostru JSON, vom observa o matrice numită „rezultate”:[
{
"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"
},
În acea matrice, primul personaj este Rick Sanchez și avem o cheie de imagine care are valoarea „https://rickandmortyapi.com/api/character/avatar/1.jspeg”
Obiectele sunt doar perechi cheie-valoare. Accesăm cheia valorii folosind notația punct. Să vorbim despre notația cu puncte.
În următorul bloc de cod, avem picture.src = data.image;
picture.src = data.image;
Acest lucru înseamnă că în imaginea noastră vrem ca sursa să fie egală cu data.image.
Ce este data.image?
Să ne uităm la conexiuni:
Avem două conexiuni diferite: Conexiunea A și Conexiunea B.
Observați rezultatele la A1 și este o conexiune cu rezultatele A2. Ceea ce face fetch-ul nostru este să ceară pur și simplu localhost:3000/results (adică în terminalul dvs. unde ați rulat json-server --watch db.json) să acceseze rezultatele matricei din db.json nostru. Vom ajunge la cele două „.atunci” mai târziu. Trebuie doar să știți că datele curg din fișierul nostru JSON către ceea ce numim date.
Deoarece permitem doar un singur obiect să provină din datele noastre JSON =:
{
"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"
}
Când ne uităm la a doua noastră conexiune, B1 (datele noastre) este trecută în B2 (parametrul nostru pe care l-am numit date)
Deci la B3 data.image =
„https://rickandmortyapi.com/api/character/avatar/1.jpeg”
Dacă punem data.name în loc de data.image am obține:
„Rick Sanchez”
Punctul este pur și simplu accesarea unei chei din datele noastre.
Acesta este modul în care ne extragem imaginea din db.json. În continuare, ne vom uita la cum să atașăm imaginea la HTML-ul nostru.
Adăugarea la HTML-ul nostru
Acum am văzut cum să extragem informații din JSON în JS-ul nostru. Ai trecut prin partea cea mai dificilă. Acum avem sarcina ușoară de a-l adăuga la HTML.
Să ne uităm mai întâi la „const whereWeAppend” din JS-ul nostru. Concentrați-vă pe div
Ceea ce spune document.querySelector este „mergi în documentul nostru HTML și găsește primul element numit div”.
Să ne retragem HTML-ul înapoi:
<!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>
localizați unde scrie div. se află în corpul HTML-ului.
Ceea ce spunem este undeWeAppend este setat ca div în HTML-ul nostru.
div acționează ca un panou pentru ca noi să ne postăm fotografiile.
Acum să ne concentrăm asupra modului în care atașăm fotografii la div-ul nostru:
Ceea ce facem mai întâi este să creăm o imagine cu metoda .createElement(). Setăm imagine = la o imagine. Rețineți că această imagine are NUMAI șablonul unei imagini. Pentru a defini imaginea reală care merge în imagine trebuie să facem picture.src în rândul următor.
Amintiți-vă că data.image este cheia „imagine” care se află în obiectul nostru JSON. Deci acum picture.src nu mai este un cadru gol. Acum are imaginea lui Rick Sanchez.
whereWeAppend este div-ul pe care l-am definit în HTML. .append-ul de pe el spune „pune poza pe div”, și iată-l, acum poți vedea fluxul complet. Să rezumăm și, ca bonus, să vorbim despre forEach
Râul nostru de informații și .forEach
Aceasta este o reprezentare vizuală a modului în care totul este conectat. Sperăm că acest lucru vă oferă o perspectivă asupra modului în care JS transferă informații. Există un ultim lucru de abordat. Acesta este forFiecare în al doilea .atunci.
Când deschidem supapa, făcând următoarele:
getCharacters("/?_limit=5")
Acum redăm toate cele 5 caractere în HTML. Dar cum?
Folosim metoda .forEach. Pentru a înțelege ce înseamnă asta, să spargem codul schimbându-l în:
.then(json => render(json))
Nu am primi nicio imagine. Asta pentru că încercăm să transmitem o întreagă gamă de obiecte și întreaga cutie nu poate găsi data.image pe acea cutie deoarece nu există.
Să folosim o analogie:
- Funcția render() este analogă cu pomparea aerului.
- json este analog unei casete.
- datele sunt analoge cu tuburile de râu din cutie.
Să presupunem că tocmai ai cumpărat o cutie plină cu cinci tuburi pentru a coborî un râu. Dacă ați încerca să pompați cutia cu aer și să aruncați cutia cu tuburi de râu în râu, nu am merge nicăieri. Când facem codul de mai sus de .then(json =› render(json)) rulăm o funcție pe cutia noastră... sau mai degrabă pompăm o cutie plină de aer. Când rulăm metoda forEach astfel:
.then(json => json.forEach(data => render(data))
Spunem să scoatem fiecare obiect din cutie și să rulăm funcția de randare pe el. Sau, în analogia noastră, scoateți fiecare tub din cutie și pompați fiecare tub individual.
În concluzie
Uită-te la tot ce ai făcut.
- Vs-code instalat
- pachete de noduri instalate
- Am văzut cum javascript conectează HTML și JSON
- a aflat despre metoda forEach
Rezultatul acestor lecții vă va permite să transmiteți date de la multe alte API-uri, astfel încât să puteți afișa informațiile acestora pe site-ul dvs. web. Pe măsură ce vă continuați educația, veți putea realiza utilitatea a ceea ce vă învață instructorii. De asemenea, dacă vă jucați cu acest cod, veți avea o mai bună înțelegere a modului în care funcționează JavaScript.
