• 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.

+1 głos
200 wizyt
pytanie zadane 31 marca w JavaScript przez rszczepanski02 Użytkownik (690 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 przez Paweł Nąckiewicz Nałogowiec (48,950 p.)
co jest w res?
komentarz 31 marca przez rszczepanski02 Użytkownik (690 p.)
Pobrana tablica elementów json
komentarz 31 marca przez Paweł Nąckiewicz Nałogowiec (48,950 p.)
ale dokładniej - możesz wstawić tam console.log?
komentarz 31 marca przez rszczepanski02 Użytkownik (690 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 przez Comandeer Guru (560,300 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 przez lukasz21 Obywatel (1,100 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 przez rszczepanski02 Użytkownik (690 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 356 wizyt
pytanie zadane 8 maja 2018 w JavaScript przez Xenoxer Użytkownik (560 p.)
0 głosów
1 odpowiedź 459 wizyt
pytanie zadane 2 stycznia 2019 w JavaScript przez kordix Gaduła (3,330 p.)

85,875 zapytań

134,650 odpowiedzi

298,919 komentarzy

56,743 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 912p. - nidomika
  7. 867p. - Michal Drewniak
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 704p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...