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

Question

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);

 

Comments

co jest w res?

---

Pobrana tablica elementów json

---

ale dokładniej - możesz wstawić tam console.log?

---

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.

Answer 1

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.

Answer 2

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/

Comments

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.