Max/Min value of an attribute in an array of objects in JavaScript
In this article, we are given an array of objects and the task is to get the maximum and minimum values from the array of objects. For this approach we have few methods that will be discussed below.
Javascript apply() method: It is a write method that is used on different objects. This method is different from the function call() because of taking arguments as an array.
Syntax:
apply()
JavaScript Array map() Method: This method is used to create a new array with the results of calling a function for each element of the array. This method calls the given function once for each element in an array, in order.
Syntax:
array.map(function(cValue, index, arr), thisValue)
Example: This example gets the maximum value of y property by using apply() and map() methods.
html
<body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [ { "x": "3/10/2003", "y": 0.023452007 }, { "x": "8/12/2002", "y": 0.02504234 }, { "x": "1/16/2001", "y": 0.024533546 }, { "x": "8/19/2006", "y": 0.03123423457 }]; el_up.innerHTML = JSON.stringify(array); function gfg_Run() { el_down.innerHTML = "Maximum value of y = " + Math.max.apply(Math, array.map(function(o) { return o.y; })); } </script></body> |
Output:
JavaScript Array reduce() Method: This method reduces the array to a single value. This method runs a defined function for every value of the array (from left to right). The return value of the function is stored in an accumulator (result or total).
Syntax:
array.reduce(function(total, curValue, curIndex, arr), initialValue)
Example: This example gets the minimum value of y property by using array.reduce() method. It returns the whole object.
html
<body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [ { "x": "3/10/2003", "y": 0.023452007 }, { "x": "8/12/2002", "y": 0.02504234 }, { "x": "1/16/2001", "y": 0.024533546 }, { "x": "8/19/2006", "y": 0.03123423457 }]; el_up.innerHTML = JSON.stringify(array); function gfg_Run() { el_down.innerHTML = JSON.stringify(array.reduce(function(prev, current) { return (prev.y < current.y) ? prev : current })); } </script></body> |
Output:
Please Login to comment...