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>

CodePudding user response：

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

CodePudding user response：

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