• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Fetch API - przechwycenie danych z json i zapis do zmiennej.

VPS Starter Arubacloud
+1 głos
995 wizyt
pytanie zadane 31 marca 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)

Cześć. Chciałbym pobrać dane z json i na podstawie listy tworzyć nowe obiekty. Problem w tym, że pobranej listy za pomocą fetch api nie mogę przesłać do zmiennej. Za każdym razem zmienna jest pusta. Mógłby ktoś proszę pomóc?

 

var dataList = [];
fetch("http://127.0.0.1:5500/src/data.json")
    .then(res => res.json())
    .then(res => {
        return dataList = res;
}); 

console.log(dataList);

 

komentarz 31 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
co jest w res?
komentarz 31 marca 2021 przez rszczepanski02 Obywatel (1,180 p.)
Pobrana tablica elementów json
komentarz 31 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
ale dokładniej - możesz wstawić tam console.log?
komentarz 31 marca 2021 przez rszczepanski02 Obywatel (1,180 p.)
Mógłbym i wtedy będzie działać, jednak ja nie będę chciał drukować w konsoli tych objektów a na ich podstawie tworzyć nowe w js i pobierać do html'a.

2 odpowiedzi

+5 głosów
odpowiedź 31 marca 2021 przez Comandeer Guru (599,730 p.)

Nie da się tego zrobić, bo Fetch jest asynchroniczne. Jeśli chcesz obrabiać dane, musisz to zrobić wewnątrz then albo użyć składni async/await.

0 głosów
odpowiedź 31 marca 2021 przez lukasz21 Obywatel (1,090 p.)

W 'res' masz tablice zawierajaca obiekty. Jeśli chcesz pobrać dane to musisz podać indeks w tej tablicy by zaznaczyć obiekt. Potem w tym obiekcie musisz podać klucz by zaznaczyć wartość klucza.

Przykładowo dla tego przykładu [API]:

https://jsonplaceholder.typicode.com/users

W tablicy dla indeksu 0 jest obiekt który ma w sobie obiekty. Pierwszy obiekt ma klucz i wartość "{username : "Bret" }". By je zaznaczyc musisz podac:  res[0].username .

 

Kod wtedy by tak wygladał:

fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(res => {
        console.log(res[0].username);  // zwraca "Bret"
      })


Zobacz też te źródła:

  • Opis tematu Fetch

https://kursjs.pl/kurs/ajax/fetch.php#pobieranie-danych

  • Przykładowe API które możesz wykorzystać do ćwiczeń.

https://jsonplaceholder.typicode.com/

https://randomuser.me/

komentarz 31 marca 2021 przez rszczepanski02 Obywatel (1,180 p.)
Tak to rozumiem, tylko zastanawiam się czy mogę ten res wyciągnąć na zewnątrz zapisując go w zmiennej, którą później wykorzystam przy tworzeniu objektów.

Podobne pytania

0 głosów
2 odpowiedzi 532 wizyt
pytanie zadane 8 maja 2018 w JavaScript przez Xenoxer Użytkownik (560 p.)
0 głosów
1 odpowiedź 676 wizyt
pytanie zadane 2 stycznia 2019 w JavaScript przez kordix Gaduła (3,910 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...