Jak zapisać pobrane dane do zmiennej i z nich korzystać

0

Witam wszystkich, uczę się trochę AJAXa i napotkałem problem.
Chce pobrane dane zapisać w zmiennej images i później na zewnątrz fetch z nich korzystać, ale nie mogę.
Gdy zrobię console.log(image) to pokazuje mi, że jest to talbica z 2 obiektami, a gdy robię instrukcję images[0] to wyświetla undefine.
Ma ktoś jakiś pomysł?

Dodam jeszcze, że w metodzie .then() gdzie robię pętle, żeby zapisać obiekty to instrukcja images[0] działa ;/


        btn2.addEventListener('click', function() {
            fetch('https://jsonplaceholder.typicode.com/photos')
                .then(resp => resp.json())
                .then(resp => {
                    for (let i = 0; i < 2; i++) {
                        images.push(resp[i]);
                    };
                });

            const a = document.querySelector('.photo');
            console.log(images); //Tuitaj pokazuje tablice z 2 obiektami
            console.dir(images[0]); //Tutaj pokazuje undefine
            for (let i = 0; i < 2; i++) {
                const image = new Image();
                image.src = images[i].url;
                a.appendChild(images);
                pause(3000);
            };
        });
0

Mieszasz kod synchroniczny z asynchronicznym - Twoja tablica images jest wypełniania asynchronicznie, dlatego też nie możesz od razu się do niej odwołać; musisz cały kod przenieść do środka:

btn2.addEventListener('click', function() {
    fetch('https://jsonplaceholder.typicode.com/photos')
        .then(resp => resp.json())
        .then(resp => {
            for (let i = 0; i < 2; i++) {
                images.push(resp[i]);
            };
        })
        .then(() => {
            const a = document.querySelector('.photo');
            
            for (let i = 0; i < 2; i++) {
                const image = new Image();
                image.src = images[i].url;
                a.appendChild(images);
                pause(3000);
            };
        });

inb4: nie, nie ma żadnej innej opcji (w szczególności żadne while (images.length == 0);) - once you go async, you never go back.

W ramach dodatkowego wyjaśnienia: console.log(images); pokazuje Ci wypełnioną tablicę, ponieważ w momencie kiedy w konsoli deweloperskiej ręcznie klikasz opcję rozwinięcia elementów tablicy, całe żądanie HTTP zdążyło się zakończyć i tablica images faktycznie (na tamten moment) jest wypełniona. Gdybyś spreparował Twoje żądanie tak, aby zajęło np. 15 sekund, spokojnie zdążyłbyś zaobserwować, że przeglądarka pokazuje Ci pustą tablicę.

0

Myślałem, że jak przeniosę do tablicy obiekty to będzie mi działał program. Bo chciałbym zrobić na zasadzie, że co 3 sekundy zmienia mi się obrazek, ale gdy zrobie funkcję tak jak poniżej to obrazek się zmienia, ale dopiero po dotarciu do ostatniego elementu. Czyli pokazuje tylko ostatnie zdjęcie, zamiast co 3 sekundy zmieniać.fotki na inne.

        btn2.addEventListener('click', function() {
            fetch('https://jsonplaceholder.typicode.com/photos')
                .then(resp => resp.json())
                .then(resp => {
                    for (let i = 0; i < 2; i++) {
                        const a = document.querySelector('.photo');
                        for (let i = 0; i < 2; i++) {
                            const image = new Image();
                            image.src = resp[i].url;
                            a.innerHTML = `<img src="${image.src}">`
                            pause(3000);
                        };
                    };
                });

1 użytkowników online, w tym zalogowanych: 0, gości: 1