Reputation: 53
html-javascript- object array
I was creating a web page that prints the name of the most expensive book after receiving five book information via the prompt () function. But when I print the name of an expensive book, only the title of the first book is printed. Can you see why?
<html>
<head>
<title>Create array of book objects</title>
<script>
function Book(title, author, price) {
this.title = title;
this.author = author;
this.price = price;
}
</script>
</head>
<body>
<h3>Create array of book objects</h3>
<hr>
<script>
var i;
var bookArray = new Array();
var textSplit;
for (i = 0; i < 5; i++) {
var input = prompt("Enter book titles, authors, and prices, separated by commas.", "");
textSplit = input.split(",");
var book = new Object();
book.title = textSplit[0];
book.author = textSplit[1];
book.price = parseInt(textSplit[2]);
bookArray[i] = book;
}
for (i = 0; i < bookArray.length; i++) {
document.write(bookArray[i].title + ", ");
document.write(bookArray[i].author + ", ");
document.write(bookArray[i].price + "<br>");
}
var most = bookArray[0];
for (i = 0; i < bookArray.length; ++i) {
if (bookArray[i].price > most) {
most = bookArray[i].price;
}
// document.write(bookArray[i].title+"<br>");
}
document.write("<br> The most expensive book is " + most.title);
</script>
</body>
</html>
Upvotes: 4
Views: 522
Answers (7)
Reputation: 13693
Find the maximum number, then get that whole object which holds the max value, by doing this you can reduce the lines significantly.
let max = Math.max(...bookArray.map(x => x.price))
let maxBook = bookArray.find(x => x.price === max)
Here is the full code: https://jsfiddle.net/chwoxv8q/
<html>
<head>
<title>Create array of book objects</title>
<script>
function Book(title, author, price) {
this.title = title;
this.author = author;
this.price = price;
}
</script>
</head>
<body>
<h3>Create array of book objects</h3>
<hr>
<script>
var i;
var bookArray = new Array();
var textSplit;
for (i = 0; i < 5; i++) {
var input = prompt("Enter book titles, authors, and prices, separated by commas.", "");
textSplit = input.split(",");
var book = new Object();
book.title = textSplit[0];
book.author = textSplit[1];
book.price = parseInt(textSplit[2]);
bookArray[i] = book;
}
var max = Math.max(...bookArray.map(x => x.price))
var maxBook = bookArray.find(x => x.price === max)
document.write("<br> The most expensive book is " + maxBook.title + maxBook.author);
</script>
</body>
</html>
Upvotes: 2
Reputation: 1294
Your if statement is misleading... The rest is okey:
if(bookArray[i].price > most){
most = bookArray[i].price;
}
Use This:
if(bookArray[i].price > most.price){
most = bookArray[i];
}
<!doctype html>
<html>
<head>
<title>Create array of book objects</title>
<script>
function Book(title, author, price) {
this.title = title;
this.author = author;
this.price = price;
}
</script>
</head>
<body>
<h3>Create array of book objects</h3>
<hr>
<script>
var i;
var bookArray = new Array();
var textSplit;
for (i = 0; i < 3; i++) {
var input = prompt("Enter book titles, authors, and prices, separated by commas.", "");
textSplit = input.split(",");
var book = new Object();
book.title = textSplit[0];
book.author = textSplit[1];
book.price = parseInt(textSplit[2]);
bookArray[i] = book;
}
for (i = 0; i < bookArray.length; i++) {
document.write(bookArray[i].title + ", ");
document.write(bookArray[i].author + ", ");
document.write(bookArray[i].price + "<br>");
}
var most = bookArray[0];
for (i = 0; i < bookArray.length; ++i) {
if (bookArray[i].price > most.price) {
most = bookArray[i];
}
// document.write(bookArray[i].title+"<br>");
}
document.write("<br> The most expensive book is " + most.title + ", " + most.author + ", " + most.price);
</script>
</body>
</html>Upvotes: 1
Reputation: 154
The first book is only getting printed because you are comparing Object to Number. You should use .price property of the object to compare and assign the object to most
var most = bookArray[0];
for(i=0; i<bookArray.length; ++i){
if(bookArray[i].price > most.price){
most = bookArray[i];
}
}
Upvotes: 2
Reputation: 497
In the final loop you are comparing an object most to the price of the ith bookarray price. You are also assigning the most object to only the price instead of the ith bookarray
You just need to change these references as follows
var most = bookArray[0];
for(i = 0; i <bookArray.length; ++i)
{
if(bookArray[i].price > most.price)
most = bookArray[i];
}
Upvotes: 1
Reputation: 626
in for loop you check if price is more than a Object if(bookArray[i].price > most){... that's wrong it's should be if(bookArray[i].price > most.price){.... then you have to assign most = bookArray[i];
Upvotes: 1
Reputation: 124
You are only printing the title of the book, because your end print line is this :
document.write("<br> The most expensive book is " + most.title);
To display the title, author and price, do something more like this :
document.write("<br> The most expensive book is " + most.title + most.author+ most.price);
And about the page only displaying the first book, you should compare the price of the most object and not the object.
Upvotes: 1
Reputation: 1809
var most references your first book. In your loop, you compare the price to the object, not to the price of the object.
Try: bookArray[i].price > most.price
Upvotes: 2