html-javascript- object array

Question

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>

Shikhar Tandon · Accepted Answer · 2019-09-30 08:40:37Z

2

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];
   }
}

answered Sep 30, 2019 at 8:40

Shikhar Tandon

1545 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniël Camps · Accepted Answer · 2019-09-30 08:31:32Z

2

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

answered Sep 30, 2019 at 8:31

Daniël Camps

1,8091 gold badge25 silver badges38 bronze badges

Comments

EugenSunic · Accepted Answer · 2019-09-30 17:50:44Z

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>

Louis Durand · Accepted Answer · 2019-09-30 08:33:30Z

1

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.

answered Sep 30, 2019 at 8:33

Louis Durand

12413 bronze badges

Comments

Sim1-81 · Accepted Answer · 2019-09-30 08:35:07Z

1

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];

answered Sep 30, 2019 at 8:35

Sim1-81

6364 silver badges14 bronze badges

Comments

kyleruss · Accepted Answer · 2019-09-30 08:39:58Z

1

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];
  }

answered Sep 30, 2019 at 8:39

kyleruss

4973 silver badges9 bronze badges

Comments

Nick Parsons · Accepted Answer · 2019-09-30 08:47:55Z

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>

Collectives™ on Stack Overflow

html-javascript- object array

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related