I have been struggling to pinpoint the exact issue at hand.
The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM.
Within my script, I am attempting to retrieve product data in order to fill the browser interface with shopping items.
The error appearing in the console is: Cannot set properties of undefined (setting 'innerText')
async function fakeStoreAPI_Products () {
const urlOfData = await fetch('https://fakestoreapi.com/products');
if(urlOfData.status !== 200 || !urlOfData.ok){
throw new Error('There was a problem fetching the data...')
}else if(urlOfData.status === 200 && urlOfData.ok){
const response = await urlOfData.json();
populate(response)
}
}
function populate (completeData) {
const displayAllCardsHere = document.getElementById('cards_inner');
const data = completeData;
for(const datum of data){
// The parent
const div_class_card = document.createElement('div').setAttribute('class', 'card')
// Child [p_class_title]
const p_class_title = document.createElement('p').setAttribute('class', 'title')
// Child [img]
const img = document.createElement('div').setAttribute('class', 'img')
// Child [p_class_description]
const p_class_description = document.createElement('p').setAttribute('class', 'description')
// Child [div_class_cat_price] ~ With children
const div_class_cat_price = document.createElement('div').setAttribute('class', 'cat_price')
// Children of [div_class_cat_price] ~ descendants of [div_class_card ~ The [grand] parent]
const p_class_category = document.createElement('p').setAttribute('class', 'category')
const p_class_price = document.createElement('p').setAttribute('class', 'price')
p_class_title.innerText = datum['title']
img.innerText = datum['image']
p_class_description.innerText = datum['description']
p_class_category.innerText = datum['category']
p_class_price.innerText = datum['price']
div_class_card.append(p_class_title)
div_class_card.append(img)
div_class_card.append(p_class_description)
div_class_card.append(div_class_cat_price)
div_class_cat_price.append(p_class_category)
div_class_cat_price.append(p_class_price)
displayAllCardsHere.append(div_class_card)
}
}
fakeStoreAPI_Products().catch((err) => {
console.log(err)
})*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Nunito Sans, Yu Gothic UI;
}
div#cards_outer{
width: 100%;
padding: 20px;
display: grid;
grid-row-gap: 20px;
}
div#heading{
text-align: center;
}
div#heading span{
font-size: 40px;
font-weight: 600;
/* hori verti blur colour */
text-shadow: 0px 0px 6px #0007;
}
div#cards_inner{
width: 100%;
display: grid;
grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
div#cards_inner div.card{
/* hori verti blur color */
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
padding: 10px;
}
div#cards_inner div.card img{
width: 100%;
}
div#cards_inner div.card p.description{
font-size: 14px;
text-align: justify;
word-wrap: break-word;
}
div#cards_inner div.card p.title,
div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price{
text-align: center;
}
div#cards_inner div.card p.title{
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
}
div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price{
font-size: 14px;
font-weight: 600;
}
div#cards_inner div.card div.cat_price p.category{
text-transform: capitalize;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" />
<title>Fetch data from API and display data on the browser</title>
</head>
<body>
<div id="cards_outer">
<div id="heading"><span>Fake API Store</span></div>
<div id="cards_inner">
<!-- populate cards here -->
</div>
</div>
</body>
</html>What aspect did I overlook?