Agfdhyk

Hi I have been trying to fetch from two API's using a fetch chain, the fetch works and the data displays correctly using console.log inside the getallproducts function but when I try to make a callback towards the displayproducts function using the data, the data is nowhere to be seen. I do not know exactly what I am doing wrong or if im using the wrong method for this but I have been trying multiple methods of fetch. promise.all seemed to be a solution but that didn't work either.

showProductsPage function

function showProductsPage() {

    var page = document.getElementById('products-page');



    hideAllPages();

    //getAllProducts();

displayproducts(getAllProducts);

    page.style.display = 'block';

}

getallproducts function

function getAllProducts(callback){

    var producten; 

var authors; 

    fetch(window.location.href+"api/products")

                .then(response => response.json())              

                .then(data => { 

                         producten = data.products;

                        console.log(data);   

                        callback(data)                

return fetch(window.location.href+"api/authors")

                }).then(response => response.json())              

                .then(data => { 

                         authors = data.authors;

                    callback(data)

                })



}

display products function

function displayproducts(data) {

    console.log(data.products);

    for (var i = 0; i < data.products.length; i++) {



    var card = document.createElement("div");

    var img = document.createElement("img");

    var name = document.createElement("BUTTON");

    var author = document.createElement("p");

    var published = document.createElement("p");

    var price = document.createElement("p");

    var cart = document.createElement("BUTTON");

    document.getElementById("products-page").appendChild(card); 

    //

    card.appendChild(img);

    card.appendChild(name);

    card.appendChild(author);

    card.appendChild(published);

    card.appendChild(price);

    card.appendChild(cart);

    //

    card.setAttribute("class", "book-card");

    img.setAttribute("class", "product-img");

    name.setAttribute("class", "book-title");

    author.setAttribute("class", "author");

    published.setAttribute("class", "published");

    price.setAttribute("class", "price");

    cart.setAttribute("class", "add-to-cart");

    //

    cart.innerHTML = "Add to Cart";

    name.innerHTML = data.products.title;

    price.innerHTML = data.products.price;

};

  //console.log(producten[1].price);

}

You mixed up the call. This:

 displayproducts(getAllProducts)

Must be:

 getAllProducts(displayproducts);