Почему возникает такая ошибка? Cannot read properties of undefined (reading 'forEach')?

Question

[svm2001]

Учу js, пытаюсь освоить запросы на сервер и получение данных с него. Делаю обучающее задание, где нужно получить данные с сервера и разместить у себя на странице. Вот js:

const btn = document.querySelector('button');
const container = document.querySelector('.container');

function getPosts(callback) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
    xhr.addEventListener("load", () => {
        const response = JSON.parse(xhr.responseText);
        console.log(response);
        callback();
    })
    xhr.addEventListener("error", () => {
        console.log("error!");
    })
    xhr.send();
}

btn.addEventListener("click", e => {
    getPosts(response => {
        const fragment = document.createDocumentFragment();
        response.forEach(post => {
            const card = document.createElement("div");
            card.classList.add("card");
            const cardBody = document.createElement("div");
            cardBody.classList.add('card-body');
            const title = document.createElement('h5');
            title.classList.add('card-title');
            title.textContent = post.title;
            const article = document.createElement("p");
            article.classList.add("card-text");
            article.textContent = post.body;
            cardBody.appendChild(title);
            cardBody.appendChild(article);
            console.log(cardBody);

        });
        container.appendChild(fragment);
    });
});

Функция getPosts запускается по клику на кнопку и потом браузер выдает "Cannot read properties of undefined (reading 'forEach')"

Повторяю код в точности как у автора на видео. А ошибка все равно есть. Помогите.

Answer 1

[Dastan_UI]

Передайте callback параметры

function getPosts(callback) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
    xhr.addEventListener("load", () => {
        const response = JSON.parse(xhr.responseText);
        console.log(response);
        callback(response);
    })
    xhr.addEventListener("error", () => {
        console.log("error!");
    })
    xhr.send();
}

Comments

[svm2001]

Большое спасибо!