-2

I'm quite new to Javascript, and need to find the min and max value of an array from user input, but I'm having difficulty with that. I tried to get the max value with this:

var max = Math.max.apply(Math, data);

but it didn't work.

Here is what I have so far:

var data = [];

var productInput = document.getElementById("product");
var priceInput = document.getElementById("price");
var qtyInput = document.getElementById("qty");
var messageBox = document.getElementById("display");

function insert() {
  var product = productInput.value;
  var price = priceInput.value;
  var qty = qtyInput.value;

  data.push({
    product: product,
    price: price,
    qty: qty,
  });

  clearAndShow();
}

function clearAndShow() {
  // Clear our fields
  productInput.value = "";
  priceInput.value = "";
  qtyInput.value = "";

  var html = "";

  // Show our output   html += "<tr>";   html += "<td>Product</td>";  
  html += "<td>price</td>";
  html += "<td>quantity</td>";
  html += "</tr>";
  for (i = 0; i <= data.length - 1; i++) {
    html += "<tr>";
    html += "<td>" + data[i].product + "</td>";
    html += "<td>" + data[i].price + "</td>";
    html += "<td>" + data[i].qty + "</td>";
    html += "</tr>";
  }
  messageBox.innerHTML = html;
}
<form>
  <h1>Please enter data</h1>
  <input id="product" type="text" placeholder="product" />
  <input id="price" type="text" placeholder="price" />
  <input id="qty" type="text" placeholder="qty" />
  <input type="button" value="Save/Show" onclick="insert()" />
</form>
<table id="display" style="width: 100%"></table>
user2
  • 19
  • 3
  • 1
    No problem, however all of that code is mostly irrelevant (apart from the structure of `data` that is). You're asking how to find the min and max of an array and your attempt is a single line that failed. Also, the array contains objects, which means you cannot compare the array elements directly. Plus, there's bound to be existing solutions to this question, on so as well as elsewhere online. –  Oct 06 '21 at 23:19
  • The solution you found applies to an array of numbers, it won't work with an array of objects; you need to implement your own comparison function based on each object's properties. –  Oct 06 '21 at 23:21
  • I see, thank you! – user2 Oct 06 '21 at 23:23

2 Answers2

2

As others have said in the comments, Math.max works on an array of numbers but not an array of objects like you have.

I recommend you look into Array.prototype.reduce, which allows you to reduce an array into a single value by running a function over each element, with persistent access to a single value that you can change with each iteration. This is also useful for similar processes like calculating the sum of all numbers in an array, for example.

Using Array.prototype.reduce will let you compare the number inside each object with the current maximum value you have stored, and either keep the same maximum value or replace it with the new one based on what your reducer function returns. You may find it useful to use -Infinity as an initial value when trying to get a maximum, so you know it's smaller than any number you might find.

So, roughly, you'll end up with something like this:

const getMaxData = function (currentMaximum, dataEl) {
    // You can examine the number inside dataEl here, and compare it to currentMaximum to decide which to return.
};

const max = data.reduce(getMaxData, -Infinity);
Mark Hanna
  • 3,206
  • 1
  • 17
  • 25
1

As stated above, the array is an array of objects and not numbers. An alternative method to get the max/min of an array of objects is by applying a sort on the array (with a specific object key), and than read the first/last object of the array.

For example, you can apply ascending sort, and get the first object of the array to get the minimum object value. You can also get the last object of the array to get the maximum object value.

An example of sorting an array of objects can be found here: Sorting an array of objects by property values

uppal2665
  • 29
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 07 '21 at 04:46
  • Thank you for your help! – user2 Oct 07 '21 at 22:52