JavaScript: Generowanie listy użytkowników

0:00Stworzymy teraz kolejny praktyczny

0:02projekt, a będzie to taka aplikacja, która pozwoli nam pobrać dane z serwera.

0:06Będą to dane w postaci JSON i następnie

0:09na ich podstawie wyrenderować taką tabelkę jak tutaj widzisz,

0:12aczkolwiek ona będzie dłuższa. I serwer, którym się posłużymy to jest

0:16ten, który już wcześniej widziałeś, czyli jsonplaceholder.

0:19Natomiast tym razem nie korzystamy z posts ale z users. I zauważ, że to zwraca nam

0:23taki JSON gdzie mamy tablicę z obiektami.

0:26Każdy obiekt ma różne dane takie jak name, username, email,

0:29następnie zagnieżdżony kolejny obiekt, gdzie

0:32mamy street no i inne takie informacje adresowe.

0:35My natomiast będziemy chcieli wykorzystać tylko te podstawowe jak właśnie name,

0:39następnie nazwa użytkownika to było username i email.

0:42Czyli taką tabelkę chcemy stworzyć.

0:44I jej tutaj nie będzie, następnie klikniemy Pobierz dane,

0:46dane się pobiorą i tabelkę wyrenderujemy.

0:49Więc od czego zaczniemy?

0:50Po pierwsze od tego, że będę chciał

0:52przypisać zdarzenie kliknięcia do przycisku Pobierz dane.

0:55Zatem ten przycisk już tutaj mam.

0:57Przypisuje zdarzenie kliknięcia i funkcje

1:00I w tej funkcji skorzystamy właśnie z

1:02metody czy z funkcji fetch, którą już Ci pokazywałem.

1:05Skopiuję sobie ten adres, bo to z niego

1:07będziemy pobierać dane i wywołamy funkcję fetch przekazując właśnie ten adres.

1:12Następnie zgodnie z tym co w dwóch

1:14poprzednich lekcjach Ci pokazywałem będziemy chcieli tutaj zrobić then

1:18i jak z serwera otrzymamy response to z tego response chcemy zwrócić json.

1:23Czyli dzięki takiemu zapisowi w kolejnym

1:25bloku then otrzymamy już konkretny json, a nie text, który się tutaj znajduje.

1:30To jest tylko text, a json to będzie tablica z obiektami. Czyli za pomocą

1:34JSON.parsed gdzieś pod spodem to zostanie odpowiednio zamienione.

1:37I teraz co my chcemy zrobić w kolejnym bloku, kiedy już będziemy mieli dostęp do

1:41tych użytkowników, napiszemy sobie tutaj data

1:46i może na początek zróbmy console.log data,

1:48żeby upewnić się, że wszystko jest tutaj pobierane poprawnie.

1:50Klikam Pobierz dane

1:51i rzeczywiście, jeżeli zerkniemy do panelu Network, wysłaliśmy zapytanie, ono jest w

1:56tym miejscu i następnie zamieniliśmy to na JSON i mamy tutaj tych użytkowników.

2:01Jest ich jak widzisz 10.

2:02Z każdego z nich będziemy sobie mogli wyciągnąć te dane, które nas interesują.

2:06Więc nie pozostało nic innego jak napisać

2:09całą resztę kodu, ale nie w tej funkcji, tylko zrobimy do tego osobne funkcje.

2:14A zatem to co będę chciał zrobić to w zasadzie tutaj od razu

2:17jak otrzymam to data to będę chciał wywołać funkcję renderTable, którą za

2:21moment stworzymy i przekaże jej tę tablicę z obiektami.

2:24I tutaj możemy na tym zakończyć, a

2:27wszystko zrobimy sobie właśnie w tej funkcji. Więc utworzymy funkcję renderTable,

2:33wiemy, że pobieramy użytkowników, więc w

2:34zasadzie możemy tutaj parametr nazwać users i to co będziemy chcieli zrobić to

2:39oczywiście musimy sobie utworzyć taką

2:40tabelkę jak tutaj widzisz. I można byłoby to zrobić na wiele sposobów.

2:44Takim najbardziej skomplikowanym byłoby

2:46tworzenie każdego elementu po kolei, czyli z użyciem documentCreateElement

2:50gdybyśmy stworzyli table, potem

2:52musielibyśmy stworzyć head i wstawić to do tego i poszczególne elementy.

2:56Byłoby to niestety bardzo skomplikowane i

2:58nie ma sensu tego robić, jeżeli możemy korzystać z metody innerHTML.

3:03Zatem to co będę chciał zrobić, to będę

3:05sobie chciał wszystko aż do tego momentu skopiować,

3:08zobacz i będę chciał tutaj utworzyć taką stałą, którą nazwiemy table

3:13i za pomocą Template Stringu po prostu wstawimy ten kod HTML w to miejsce.

3:18Przeformatuje go tylko po to, żeby tutaj lepiej wyglądał i zakończymy

3:21oczywiście to wszystko, tbody musimy

3:23zakończyć i następnie zakończyli byśmy samo table. Tak by to wyglądało.

3:29I mamy już jakiś fragment tej tabelki i

3:31następnie będziemy chcieli ją wstawić na stronę.

3:34Żeby to zrobić to tabelkę, którą tutaj mieliśmy już od początku.

3:37Ja ją tutaj mogę zwinąć i wykomentować, żeby ona ze strony zniknęła.

3:41I teraz pokażę Ci, w jaki sposób możemy z

3:43użyciem innerHTML ten kod wstawić na stronę.

3:46Zauważ, że nie musieliśmy tworzyć każdego elementu z osobna, ale jest jeden element,

3:50który musimy utworzyć i będzie to jakiś taki pusty div.

3:53Więc stałą nazywam div i za pomocą document.createElement

3:56utworzę element div i następnie do tego div za pomocą innerHTML

4:01przypisze cały ten kod tabelki, który mamy wyżej.

4:04Dzięki temu przeglądarka utworzy wszystkie te elementy. Więc nie pozostało nic innego

4:09jak ten element div wstawić na stronę w to miejsce, gdzie mieliśmy tę tabelkę,

4:13a więc tak naprawdę wstrzyknąć go do tego elementu container.

4:17OK, czyli możemy wyszukać sobie na stronie tego elementu container za pomocą

4:21document.querySelector container po klasie i zrobimy mu append div.

4:30OK.

4:31To sprawi, że ta tabelka zacznie się tutaj pojawiać.

4:34Oczywiście ona jeszcze nie jest kompletna,

4:36ale jak widzisz w ten sposób mogliśmy ten problem rozwiązać.

4:40No i teraz w zasadzie pozostała jedna bardzo istotna rzecz.

4:43Otóż tutaj wewnątrz tego tbody będziemy chcieli utworzyć tr dla każdego elementu.

4:49No i generalnie dokładnie to samo co mieliśmy tutaj. Czyli dla każdego

4:52użytkownika takie tr i takie td będziemy chcieli utworzyć.

4:56Znowu nie będziemy ich tworzyć za pomocą document.createElement

5:00tylko znowu w formie stringu, który tam wstrzykniemy z użyciem innerHTML.

5:04Natomiast jak zrobić tak, żeby tutaj można

5:06było podstawić od razu jakby gotowy kod HTML

5:10dla wszystkich użytkowników, którzy zostali tutaj przekazanie z tego JSON.

5:13Otóż możemy sobie tutaj zinterpolować wywołanie funkcji, którą nazwiemy renderRows,

5:18czyli wyrenderuj wiersze i jej przekażemy tych użytkowników.

5:22Ta funkcja musi zadbać o to, żeby dla każdego elementu tablicy, który tam będzie

5:27zwrócić nam taki oto string z odpowiednimi danymi.

5:31Więc stwórzmy sobie teraz tą funkcję, którą nazwiemy renderRows.

5:35Ona otrzyma właśnie tych użytkowników, więc parametr nazwiemy users, chociaż

5:40to users i to users jak widzisz nazywa się tak samo, ale w dwóch różnych funkcjach,

5:44więc one w żaden sposób ze sobą nie kolidują.

5:46Tutaj to users przekazujemy oczywiście

5:49i tutaj mamy do tego dostęp.

5:51No i teraz najważniejsze pytanie w jaki

5:53sposób możemy najłatwiej wygenerować dla wszystkich elementów tablicy users?

5:58Bo jest to tablica, w której mamy poszczególne obiekty

6:01i jak możemy dla wszystkich tych elementów

6:03wygenerować taki tr o jakim mówiłem, czyli coś takiego.

6:07W zasadzie możemy sobie to też skopiować.

6:09Możemy skorzystać z metody map, która jest dostępna na tablicach i ta metoda wywoła

6:14funkcję, którą podamy dla każdego elementu tablicy.

6:17I to, co z tej funkcji zwrócimy znajdzie się pod danym indeksem tablicy.

6:21Czyli jak mielibyśmy tablicę 1, 2, 3 na niej wywołali map i przekazali tam funkcję,

6:26otrzymalibyśmy tam elem,

6:27to to co zwrócimy z tej funkcji np.

6:29elem razy 10 powiedzmy znajdzie się w nowej tablicy i w ten

6:34sposób utworzylibyśmy nową tablicę, gdzie mielibyśmy 10, 20, 30.

6:38Mam nadzieję, że to jest jasne.

6:39W razie czego zapauzuj i zobacz co tutaj się dzieje.

6:41Czyli otrzymujemy jeden element i to co

6:43zwrócimy znajdzie się pod tym indeksem w nowej tablicy.

6:46Skoro my tutaj otrzymamy

6:50jednego takiego użytkownika możemy sobie

6:52zobaczyć jeszcze raz co nam się tam pobiera z serwera,

6:54tutaj w preview, będzie to taki oto obiekt to możemy z niego zwrócić właśnie string

7:00w postaci takiego wiersza, który skopiowałem.

7:03Czyli tak to wygląda.

7:04Zatem najpierw odwołamy się do users.map i tutaj przekażę funkcję.

7:09Może to być funkcja taka strzałkowa.

7:12W ten sposób. Więc pod user będziemy mieli za każdą

7:16iteracją, bo to map się wykonuje w pętli za każdą iteracją jeden taki obiekt i stąd

7:20będziemy chcieli zwrócić taki Template String, który trochę lepiej sformatuje, w

7:25ten sposób i tutaj będziemy chcieli podstawić,

7:28zobaczmy, id użytkownika, potem name, username i email.

7:32Z tych pól sobie skorzystamy.

7:34A zatem za pomocą interpolacji

7:35jeżeli pod user mamy jeden taki obiekt z JSON utworzony to możemy się odwołać

7:40tutaj to user.id,

7:41następnie do i user.name,

7:47następnie będzie to user chyba username. Zobaczmy.

7:52Zgadza się

7:55i chcę taki utworzyć link po kliknięciu w który można otworzyć od razu maila

7:58więc tutaj chcemy podstawić ten mail i również tutaj.

8:01A zatem robię taką interpolację w dwóch miejscach i piszę user.email

8:06I to oznacza, że cały ten zapis stworzy nową tablicę, gdzie pod każdym indeksem

8:10będzie po prostu taki string z uzupełnionym danymi.

8:13A więc zamieniliśmy tablicę users na kolejną tablicę, która korzysta z tych

8:17danych, ale będzie to już tablica po prostu z ciągami znaków.

8:21To oznacza tylko tyle, że wystarczy tę tablicę zwrócić.

8:24Natomiast tutaj będzie jeszcze jeden problem.

8:26Zobaczmy.

8:28Zobacz. Pobierz dane i zobacz, tu jakieś dziwne rzeczy nam się wstawiły.

8:31Zobaczmy, co to w ogóle jest.

8:33Jakiś div się tutaj pojawił z jakimiś dziwnymi przecinkami, potem jakaś tabelka.

8:37No właśnie przeglądarka była w stanie

8:38jakby wygenerować tę tabelkę, ale tak naprawdę popełniliśmy tutaj taki błąd, że

8:43zwracamy tablicę i w tym miejscu podstawiamy tą tablicę,

8:47więc domyślnie na niej zostało zrobione

8:49toString, gdzie wszystkie elementy zostały oddzielone przecinkami.

8:53Przeglądarka sobie te przecinki wyciągnęła w inne miejsce i poprawnie wyrenderowała

8:56tablicę, ale tak naprawdę to co chcieliśmy tutaj zrobić z tej funkcji render Rows,

9:01czyli w tym miejscu to nie zwrócić tablicy, ale zwrócić string.

9:05Skoro metoda map tworzy nam nową tablicę i pod każdym indeksem znajduje się taki

9:09string, to chciałbym na końcu całą tę tablicę metodą join

9:13po prostu połączyć i możemy ją połączyć na pustym ciągu znaków albo na nowym wierszu.

9:18To nie ma większego znaczenia.

9:19Natomiast dzięki join sprawimy, że renderRows

9:22nie zwraca już tablicy, ale string, gdzie będą połączone wszystkie elementy

9:26tablicy. I ten string zostanie zinterpolowany w tym miejscu.

9:29Więc jak to zapiszę, zobaczmy.

9:32Teraz już wszystko jest w porządku.

9:33No i w taki sposób udało nam się stworzyć taką funkcję

9:37czy w zasadzie dwie funkcje, które

9:38renderują nam tabelkę na podstawie danych z serwera.

9:41I gdybym w dowolnym momencie chciał tutaj dodać kolejne dane.

9:45Zerkam sobie do JSON, który jest zwracany np.

9:47phone,

9:48no i wtedy mogę dodać taką kolumnę w tym miejscu.

9:50Tutaj dodałbym telefon, a tu gdzie renderuje wiersz,

9:53w td dodałbym sobie właśnie odwołanie do user.phon

9:57no i mielibyśmy kolejną kolumnę załatwioną.

10:00Ostatnią rzeczą, którą możemy zrobić na

10:02koniec, to kiedy pobierzemy te dane to możemy ukryć ten przycisk, bo jak jeszcze

10:05raz klikniemy to ta tabelka będzie wstawiona po raz kolejny.

10:08To można zrobić w dowolnym miejscu.

10:10Możemy to zrobić np.

10:11tutaj w kolejnym bloku then, który się wykona

10:13po tym bloku, możemy po prostu wstawić taką

10:15funkcję sztrzałkową, odwołać się do button i wywołać na nim remove.

10:19Czyli to można zrobić tu, ale równie

10:21dobrze można to zrobić w metodzie renderTable,

10:23chociaż chciałem, żeby ona była trochę jakby samodzielna i nie musiała nic

10:27wiedzieć na temat tego przycisku, stąd ten przycisk ukrywam

10:29w tym miejscu. Pobieramy dane, ukrywamy

10:32przycisk czy w zasadzie usuwamy go ze strony i dane są wyświetlone w ten sposób.

10:37Jak zatem widzisz w tzw.

10:38czystym JavaScript

10:39w ten sposób można wyrenderować dane, JSON na stronie,

10:42natomiast jeżeli w przyszłości będziesz

10:44korzystał z frameworków typu View, React czy Angular, tam będzie to można zrobić w

10:48nieco bardziej przejrzysty i prostszy sposób,

10:50ale warto wiedzieć, że gdybyśmy tylko dla tego celu chcieli dołączyć do strony taki

10:54framework, to dodajemy od kilkudziesięciu do nawet kilkuset kilobajtów dodatkowego

10:59kodu, bo tyle te frameworki zajmują tylko po to, żeby nam się pracowało wygodniej.

11:04Więc jeżeli masz pobrać jakieś dane z

11:05serwera i w jakiś sposób je wyświetlić i nie potrzebujesz tego robić na wielu

11:09podstronach czy w wielu miejscach, spokojnie możesz to zrobić w tak zwanym

11:12czystym JavaScripcie, tak jak Ci teraz pokazałem.

11:14No i jak widzisz również nie musimy za

11:16każdym razem tworzyć wszystkich elementów z użyciem createElement.

11:20Możemy utworzyć string gdzie będzie kod HTML.

11:23Następnie ten HTML ustawić poprzez innerHTML

11:26i dopiero wtedy taki element wstrzyknąć na stronę.