Currently, I am attempting to retrieve HTML content stored in my MySQL database using nodejs.
The products are being retrieved from the database successfully.
export async function getAllProducts() {
try {
const response = await fetch('http://localhost:4000/productos');
if (!response.ok) {
throw new Error(`Error: ${response.status} - ${response.statusText}`);
}
const json = await response.json();
return json;
} catch (error) {
console.error('Error fetching products:', error.message);
throw error;
}
}
However, when trying to insert it into the HTML, I encounter this error:
import { getAllProducts } from "../products.js"
//instances
const burger_container = document.getElementById("burger-container");
const smash_container = document.getElementById("smash-container");
const salad_container = document.getElementById("salad-container");
const drink_container = document.getElementById("drink-container");
const fillProducts = async () => {
const products = await getAllProducts();
products.forEach(product => {
const category = product.category;
let container;
// Directly comparing with strings
if (category === "hamburguesa") {
container = burger_container;
} else if (category === "smash") {
container = smash_container;
} else if (category === "ensalada") {
container = salad_container;
} else if (category === "bebida") {
container = drink_container;
}
// Creating element within the category
if (container) {
container.innerHTML += `<div>${product.name}</div>`;
}
});
}
Please assist me with this issue :)
I am endeavoring to fetch the products from the database and display them in the HTML using container.innerHTML.