Find the smallest key in the array using JavaScript's Object.keys(arr) and the reduce

Question

Find the smallest key in the array using JavaScript's Object.keys(arr) and the reduce

In my experiment, I have 3 distinct scenarios which are fed into the function findMinDateAndMaxValue:

{}

{ '2022-04-29': 1 }

{ '2022-04-29': 3, '2022-04-30': 2, '2022-04-28': 3, '2022-05-02': 2 }

My objective is to extract the key:value pair with the earliest date and the highest value from each scenario. However, in the third case, I encounter an issue where I get '2022-04-29': 3 instead of '2022-04-28': 3

findMinDateAndMaxValue = dates => {

    return Object.keys(dates).reduce((prev, curr) => {

        if (dates[curr] > prev.date) {
        
            return {
                val: dates[curr],
                date: curr
            };
        } else {
            return prev;
        }
    }, {
        val: 0,
        date: null
    }); }

expected outcome for scenario 1 : { val: 0, date: null }

expected outcome for scenario 2 : { val: 1, date: '2022-04-29' }

expected outcome for scenario 3: { val: 3, date: '2022-04-28' }

javascript arrays reduce

Answer 1

Answer №1

It appears that you simply need to sort the object by two parameters:

const test1 = {};
const test2 = { '2022-04-29': 1 };
const test3 = { '2022-04-29': 3, '2022-04-30': 2, '2022-04-28': 3, '2022-05-02': 2 };
const test4 = { '2022-04-29': 4, '2022-04-28': 4, '2022-04-30': 4, '2022-05-02': 2 };

  
const getEarliest = (dates) => {
  const [date, val] = Object.entries(dates)
    .sort(([k1, v1], [k2, v2]) => v2 - v1 || Date.parse(k1) - Date.parse(k2) ) 
    .at(0) ?? [null, 0];

  return { val, date };
};

console.log(getEarliest(test1));
console.log(getEarliest(test2));
console.log(getEarliest(test3));
console.log(getEarliest(test4));

.as-console-wrapper {max-height: 100% !important; top: 0}

You can achieve the same result using reduce:

const test1 = {};
const test2 = { '2022-04-29': 1 };
const test3 = { '2022-04-29': 3, '2022-04-30': 2, '2022-04-28': 3, '2022-05-02': 2 };
const test4 = { '2022-04-29': 4, '2022-04-28': 4, '2022-04-30': 4, '2022-05-02': 2 };

  
const getEarliest = (dates) => {
  const [date, val] = Object.entries(dates)
    .reduce((prev, curr) => (curr[1] - prev[1] || Date.parse(prev[0]) - Date.parse(curr[0])) > 0  
      ? curr 
      : prev
    , [null, 0]);
  
  return { val, date };
};

console.log(getEarliest(test1));
console.log(getEarliest(test2));
console.log(getEarliest(test3));
console.log(getEarliest(test4));

.as-console-wrapper {max-height: 100%!important;top:0 }

Answer 2

It appears that you simply need to sort the object by two parameters:

const test1 = {};
const test2 = { '2022-04-29': 1 };
const test3 = { '2022-04-29': 3, '2022-04-30': 2, '2022-04-28': 3, '2022-05-02': 2 };
const test4 = { '2022-04-29': 4, '2022-04-28': 4, '2022-04-30': 4, '2022-05-02': 2 };

  
const getEarliest = (dates) => {
  const [date, val] = Object.entries(dates)
    .sort(([k1, v1], [k2, v2]) => v2 - v1 || Date.parse(k1) - Date.parse(k2) ) 
    .at(0) ?? [null, 0];

  return { val, date };
};

console.log(getEarliest(test1));
console.log(getEarliest(test2));
console.log(getEarliest(test3));
console.log(getEarliest(test4));

.as-console-wrapper {max-height: 100% !important; top: 0}

You can achieve the same result using reduce:

const test1 = {};
const test2 = { '2022-04-29': 1 };
const test3 = { '2022-04-29': 3, '2022-04-30': 2, '2022-04-28': 3, '2022-05-02': 2 };
const test4 = { '2022-04-29': 4, '2022-04-28': 4, '2022-04-30': 4, '2022-05-02': 2 };

  
const getEarliest = (dates) => {
  const [date, val] = Object.entries(dates)
    .reduce((prev, curr) => (curr[1] - prev[1] || Date.parse(prev[0]) - Date.parse(curr[0])) > 0  
      ? curr 
      : prev
    , [null, 0]);
  
  return { val, date };
};

console.log(getEarliest(test1));
console.log(getEarliest(test2));
console.log(getEarliest(test3));
console.log(getEarliest(test4));

.as-console-wrapper {max-height: 100%!important;top:0 }

Answer 3

Answer №2

The prev.date value in your code is originally set to null, which means that the reduce() function will always return the initial object.

You can try using this updated code for better results:

 getEarliest = (dates) => {
      if (Object.keys(dates).length > 0) {
        let earliestDate = Object.keys(dates).reduce((prevDate, currDate) => {
          if (prevDate > currDate) {
            return currDate;
          } else {
            return prevDate;
          }
        });

        return {
          value: dates[earliestDate],
          date: earliestDate
        }
      } else {
        return {
          value: 0, 
          date: null
        }
      }
    }

Answer 4

The prev.date value in your code is originally set to null, which means that the reduce() function will always return the initial object.

You can try using this updated code for better results:

 getEarliest = (dates) => {
      if (Object.keys(dates).length > 0) {
        let earliestDate = Object.keys(dates).reduce((prevDate, currDate) => {
          if (prevDate > currDate) {
            return currDate;
          } else {
            return prevDate;
          }
        });

        return {
          value: dates[earliestDate],
          date: earliestDate
        }
      } else {
        return {
          value: 0, 
          date: null
        }
      }
    }

Answer 5

Answer №3

With 2 sort conditions in play, the order becomes crucial for accurate results. Based on the examples provided, it seems that the preferred order is: "largest value" followed by "earliest date". In this case, your if statement should be structured as shown below:

findEarliest = (dates) => {
  return Object.keys(dates).reduce(
    (previous, current) => {
      if (dates[current] > previous.value || (dates[current] === previous.value && current < previous.date)) {
        return {
          value: dates[current],
          date: current,
        }
      } else {
        return previous
      }
    },
    {
      value: 0,
      date: null,
    }
  )
}

Answer 6

With 2 sort conditions in play, the order becomes crucial for accurate results. Based on the examples provided, it seems that the preferred order is: "largest value" followed by "earliest date". In this case, your if statement should be structured as shown below:

findEarliest = (dates) => {
  return Object.keys(dates).reduce(
    (previous, current) => {
      if (dates[current] > previous.value || (dates[current] === previous.value && current < previous.date)) {
        return {
          value: dates[current],
          date: current,
        }
      } else {
        return previous
      }
    },
    {
      value: 0,
      date: null,
    }
  )
}

Answer 7

Answer №4

The initial statement lacks a definition for the .date property, resulting in it being undefined. Since dates is an array and not an object, referencing dates[curr] as dates['2022-04-28'] provides no meaningful value. In notation like array[5], an integer serves as the index within the brackets, representing the third parameter of .reduce().
```
if (dates[curr] > prev.date) {...
```
The appearance of "2022-04-29" occurs because the array remains unchanged; to resolve this, sorting the dates using .sort() is suggested as a simpler alternative compared to the complexity of .reduce(), especially for beginners.

Additional insights are provided in the following example

let A = {};

let B = {
  '2022-04-29': 1
};

let C = {
  '2022-04-29': 3,
  '2022-04-30': 2,
  '2022-04-28': 3,
  '2022-05-02': 2
};

// Utility function
const log = data => console.log(JSON.stringify(data));

/*
Timestamp to YYYY-MM-DD format conversion and vice versa
*/
const dX = (number, string) => {
  let D;
  if (number) {
    let date = new Date(number);
    D = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
  } else if (string) {
    D = Date.parse(string);
  } else {
    return false;
  }
  return D;
};

// Processing tS = {...}
const getEarliest = tS => {
  // if tS is empty...
  if (Object.keys(tS).length === 0) { // Return predefined object
    return {
      val: 0,
      date: null
    };
  }

  let table = Object.entries(tS).map(([k, v]) => [k, v]).sort((a, b) => dX(null, a[0]) - dX(null, b[0]));
  let obj = {};
  obj.val = table[0][1];
  obj.date = table[0][0];
  return obj;
};

log(getEarliest(A));
log(getEarliest(B));
log(getEarliest(C));

Answer 8

The initial statement lacks a definition for the .date property, resulting in it being undefined. Since dates is an array and not an object, referencing dates[curr] as dates['2022-04-28'] provides no meaningful value. In notation like array[5], an integer serves as the index within the brackets, representing the third parameter of .reduce().
```
if (dates[curr] > prev.date) {...
```
The appearance of "2022-04-29" occurs because the array remains unchanged; to resolve this, sorting the dates using .sort() is suggested as a simpler alternative compared to the complexity of .reduce(), especially for beginners.

Additional insights are provided in the following example

let A = {};

let B = {
  '2022-04-29': 1
};

let C = {
  '2022-04-29': 3,
  '2022-04-30': 2,
  '2022-04-28': 3,
  '2022-05-02': 2
};

// Utility function
const log = data => console.log(JSON.stringify(data));

/*
Timestamp to YYYY-MM-DD format conversion and vice versa
*/
const dX = (number, string) => {
  let D;
  if (number) {
    let date = new Date(number);
    D = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
  } else if (string) {
    D = Date.parse(string);
  } else {
    return false;
  }
  return D;
};

// Processing tS = {...}
const getEarliest = tS => {
  // if tS is empty...
  if (Object.keys(tS).length === 0) { // Return predefined object
    return {
      val: 0,
      date: null
    };
  }

  let table = Object.entries(tS).map(([k, v]) => [k, v]).sort((a, b) => dX(null, a[0]) - dX(null, b[0]));
  let obj = {};
  obj.val = table[0][1];
  obj.date = table[0][0];
  return obj;
};

log(getEarliest(A));
log(getEarliest(B));
log(getEarliest(C));

Find the smallest key in the array using JavaScript's Object.keys(arr) and the reduce

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I convert hexadecimal to a string using C?

Picked (chosen-js): Steps to deselect options using a variety of selectors

Invoking a subclass's method within a base class in Typescript

Is there a way to programmatically display a Chakra-UI Toast?

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Differentiating between mouseenter and tap events: What's the key?

What is the best approach for writing an asynchronous function while utilizing $rootScope.broadcast within a continuous loop?

Is there a way to refine results based on geographic location?

Switching from using $.AJAX to using $.POST is a

Navigating JSON Data in Groovy Using a Loop: A Handy Guide

The download button consistently targets and downloads the initial SVG in my collection. How can I configure it to target each individual SVG for download?

Troubleshoot: Why is my Google Chrome not playing videos? Uncover the solution with a

Migrate the JavaScript variable created with 'passport' to an Express router

Extracting a precise value from an array nested within another array

Is there a way to retrieve the array ID from one page and pass it to a different redirect page?

What is the best way to incorporate a countdown timer on an ASP.NET webpage?

Updating a column in a SQL Table via an Ajax request

Determining the minimum and maximum values of a grid using props in a React component

The jQuery functions seem to be malfunctioning when trying to retrieve elements by their ids

Ways to troubleshoot the error message 't.rangeslider is not a function' in which rangeslider is a personalized function