I'm trying to update my webpage dynamically using jQuery and JavaScript, but I am facing problems with loading the content. I have created 4 distinct objects and I want to display each object's content on the page by calling a function with specific arguments (book1, book2, album1, album2). My goal is to have the page load the objects and their respective content in this order: book1, book2, album1, album2.
Currently, when I load the page, I see the "name", "category", and "price" values from book2 (Life of Pi), along with the "selling_points" values from book1 repeated on all four divs instead.
*Whenever I check the console, I encounter an "Uncaught TypeError: Cannot read property 'forEach' of undefined" error for the "product.selling_points.forEach(function(point)" segment of my code.
Furthermore, I am unsure about how to include each object's respective picture_url; currently, I am directly adding the image URL I wish to use for book1 to every div.
body {
background-color: green;
}
#header {
background-color: red;
font-size:300%;
text-align: center;
color: purple;
font-weight: bold;
}
#navbar {
background-color:blue;
text-align: center;
}
#content {
background-color: red;
text-align: center;
font-size:150%;
font-style: oblique;
color:darkblue;
}
#book1 {
background-color: red;
font: black;
}
#book2 {
background-color: red;
font: black;
}
#album1 {
background-color: red;
font: black;
}
#album2 {
background-color: red;
font: black;
}
.image {
height:600px;
width:420px;
display: block;
margin-left: auto;
margin-right: auto;
}
p {
font-size:120%;
text-align: center;
}
.name {
font-size: 150%;
}
background-color: red;
font: black;
}
#album1 {
background-color: red;
font: black;
}
#album2 {
background-color: red;
font: black;
}
.image {
height:600px;
width:420px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Blamazon</title>
</head>
<body>
<div id="header">BLAMAZON</div><br>
<div id="content">Products</div><br>
<div id="book1">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="book2">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="album1">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="album2">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="footer"></div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
var book1, book2, album1, album2
book1 = {
product_id: 'book1',
"name": "Thinking Fast and Slow",
"category": "Non-Fiction",
"picture_url": "http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg",
"price": "$7.07",
"selling_points": ["This will help you make better decisions!", "Understand how humans make the wrong decisions so often"]
}
book2 = {
product_id: 'book2',
"name": "The Life of Pi",
"category": "Fiction",
"picture-url": "http://bestfreebooks.org/wp-content/uploads/2015/07/Life-of-Pi-Yann-Martel.jpg",
"price": "$9.07",
"selling_points": ["This will make you never want to get on a boat with a tiger...", "And understand the meaning of life!"]
}
album1 = {
product_id: 'album1',
"name": "Back in Black, AC DC",
"category": "Hard Rock",
"picture_url": "https://upload.wikimedia.org/wikipedia/commons/b/be/Acdc_backinblack_cover.jpg",
"price": "$12.07",
"selling_points": ["Oldie but a goodie", "Will help you rock out"]
}
album2 = {
product_id: 'album2',
"name": "Good kid maad city",
"category": "Hip-Hop",
"picture_url": "http://ecx.images-amazon.com/images/I/51Zzc7PUDML._SY300_.jpg",
"price": "$12.07",
"selling_points": ["A sprawling masterpiece of technical rapping and structured storytelling", "Defies and expands the conventions of the genre"]
}
var add_product = function(product) {
var $prod = $('#' + product.product_id)
$prod.find('.name').text(product.name)
$prod.find('.category').text(product.category)
$prod.find('.image').attr('src','http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg')
$prod.find('.price').text(product.price)
product.selling_points.forEach(function(point) {
$prod.find('.description').append("<div><br>" + point + "</div><br>")
})
}
add_product(book1)
add_product(book2)
add_product(album1)
add_product(album2)
/*
var add_product = function(product) {
$('.name').text(product.name)
$('.category').text(product.category)
$('.image').attr('src','http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg')
$('.price').text(product.price)
product.selling_points.forEach(function(point) {
$('.description').append("<div><br>" + point + "</div><br>")
})
}
add_product(book1)
add_product(book2)
add_product(album1)
add_product(album2)
*/
</script>
</body>
</html>