Не работает отображение объектов из массива
Я написал скрипт, который должен выводить из массива данные, которые я указал, но там ошибка. Не понимаю причину.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="header"></div>
<div id="products"></div>
<script src="js/5json.js"></script>
<script src="js/watch5.js"></script>
<script src="js/root.js"></script>
</body>
</html>
5json.js(отрывок):
const CLASS5 = [
{
"query": "Царевна-Лягушка",
"athor": "-",
"pages": "3-4 листа А4",
"age": "3+",
"class": "5",
"images": "json/1.jpg"
},
{
"query": "Журавль и цапля",
"athor": "-",
"pages": "2-3 листа А4",
"age": "3+",
"class": "5",
"images": "json/2.jpg"
},
{
"query": "Солдатская шинель",
"athor": "-",
"pages": "4-6 листа А4",
"age": "3+",
"class": "5",
"images": "json/3.jpg"
},
{
"query": "Иван - крестьянский сын и чудо - юдо",
"athor": "-",
"pages": "3-5 листа А4",
"age": "3+",
"class": "5",
"images": "json/4.jpg"
},
root.js:
const ROOT_HEADER = document.getElementById("header")
const ROOT_PRODUCTS = document.getElementById("products")
watch5.js:
class Products {
render() {
let htmlCatalog = '';
CLASS5.forEach(({ images, query }) => {
htmlCatalog += `
<li>
<img src="${images}">
<span>${query}</span>
</li>
`;
});
const html = `
<ul>
${htmlCatalog}
</ul>
`;
ROOT_PRODUCTS.innerHTML = html;
}
}
const ProductsPage = new Products();
ProductsPage.render();
консоль ругается на стоку "ROOT_PRODUCTS.innerHTML = html;"
Источник: Stack Overflow на русском