My project is supposed to display products from an API that I hosted on Github Pages. I used vanilla javascript to create the code. Here it is:
import { allProductsUrl } from "./utils.js";
const fetchProducts = async () => {
const response = await fetch(allProductsUrl).catch((err) => console.log(err));
if (response) {
return response.json();
}
return response;
};
export default fetchProducts;
When I inspected the browser, I wanted an error message to show up in the console. Unfortunately, there is no error message when going into inspect mode. Even if I change the console log to a simple string message I’m still not getting any results within the console. Here is the code where I choose to invoke the function that I created:
import "./src/toggleSidebar.js";
import "./src/cart/toggleCart.js";
import "./src/cart/setupCart.js";
// specific imports
import fetchProducts from "./src/fetchProducts.js";
import { setupStore, store } from "./src/store.js";
import display from "./src/displayProducts.js";
import { getElement } from "./src/utils.js";
const init = async () => {
const products = await fetchProducts();
if (products) {
// add products to the store
setupStore(products);
const featured = store.filter((product) => product.featured === true);
display(featured, getElement(".featured-center"));
}
};
window.addEventListener("DOMContentLoaded", init);
I’ve tested my API on Postman and I received a response. Please let me know how I can get a response within my project.