Getting the data from the final day of every month in a Typescript time-series object array

Question

Getting the data from the final day of every month in a Typescript time-series object array

I am dealing with timeseries data retrieved from an API that consists of random dates like the following:

[
  {
    "id": 1,
    "score": 23,
    "date": "2023-08-30"
  },
  {
    "id": 2,
    "score": 62,
    "date": "2023-08-22"
  },
  {
    "id": 3,
    "score": 82,
    "date": "2023-07-27"
  }
          .
          .
          .
]

My goal is to efficiently extract the data corresponding to the last day of each month. The desired output should look something like this:

[
  {
    "id": 1,
    "score": 23,
    "date": "2023-08-30"
  },
  {
    "id": 3,
    "score": 82,
    "date": "2023-07-27"
  }
          .
          .
          .
]

To achieve this, I am currently experimenting with a function like the one below:

const getMonthlyData = (allData: Timeseries[]): Timeseries[] => {

//Iterate over each entry to identify the maximum date per month and include it in the return array

}

Restructured for clarity and better readability

typescript react-typescript

Answer 1

Answer №1

Imagine you have an array called scores containing various data.

This method involves creating a middleman object that links a specific month and year to the most recent entry, then extracting those values back into the desired array format.

It's worth noting that while theoretically the order may not remain consistent (due to JS spec on object key ordering), practically speaking in modern browsers and js runtimes like node, it usually does maintain order.

If maintaining strict order is crucial, consider sorting by date field afterward. However, this step is often unnecessary in practice.

In cases where there are multiple entries with identical dates, this approach selects the last one due to the use of the >= operator. To switch to the first one, change it to >.

You can test this solution using the provided playground.

type Timeseries = {
  id: number
  score: number
  date: string
}

let scores: Timeseries[] = [
  {
    id: 1,
    score: 23,
    date: "2023-08-30",
  },
  {
    id: 2,
    score: 62,
    date: "2023-08-22",
  },
  {
    id: 3,
    score: 82,
    date: "2023-07-27",
  },
]

const lastOfMonthScores = Object.values(
  scores.reduce<Record<string, Timeseries>>(
    (keyedTimeSeries, currentTimeSeries) => {
      const currentDate = new Date(currentTimeSeries.date)
      const currentKey = `${currentDate.getFullYear()}-${currentDate.getMonth()}`
      const existingEntry = keyedTimeSeries[currentKey]
      const existingDate = existingEntry
        ? new Date(existingEntry.date)
        : undefined
      return {
        ...keyedTimeSeries,
        [currentKey]: existingDate
          ? currentDate >= existingDate
            ? currentTimeSeries
            : existingEntry
          : currentTimeSeries,
      }
    },
    {},
  ),
)

console.log(lastOfMonthScores)

https://i.sstatic.net/Xwpev.png

Answer 2

Imagine you have an array called scores containing various data.

This method involves creating a middleman object that links a specific month and year to the most recent entry, then extracting those values back into the desired array format.

It's worth noting that while theoretically the order may not remain consistent (due to JS spec on object key ordering), practically speaking in modern browsers and js runtimes like node, it usually does maintain order.

If maintaining strict order is crucial, consider sorting by date field afterward. However, this step is often unnecessary in practice.

In cases where there are multiple entries with identical dates, this approach selects the last one due to the use of the >= operator. To switch to the first one, change it to >.

You can test this solution using the provided playground.

type Timeseries = {
  id: number
  score: number
  date: string
}

let scores: Timeseries[] = [
  {
    id: 1,
    score: 23,
    date: "2023-08-30",
  },
  {
    id: 2,
    score: 62,
    date: "2023-08-22",
  },
  {
    id: 3,
    score: 82,
    date: "2023-07-27",
  },
]

const lastOfMonthScores = Object.values(
  scores.reduce<Record<string, Timeseries>>(
    (keyedTimeSeries, currentTimeSeries) => {
      const currentDate = new Date(currentTimeSeries.date)
      const currentKey = `${currentDate.getFullYear()}-${currentDate.getMonth()}`
      const existingEntry = keyedTimeSeries[currentKey]
      const existingDate = existingEntry
        ? new Date(existingEntry.date)
        : undefined
      return {
        ...keyedTimeSeries,
        [currentKey]: existingDate
          ? currentDate >= existingDate
            ? currentTimeSeries
            : existingEntry
          : currentTimeSeries,
      }
    },
    {},
  ),
)

console.log(lastOfMonthScores)

https://i.sstatic.net/Xwpev.png

Answer 3

Answer №2

const MONTHLY_DATE_REGEX = /(\d{4}-\d{2})-\d{2}/

const extractMonthlyData = (allData: Timeseries[]): Timeseries[] => {
  const monthMaxValues: Record<string, Timeseries> = {}
  for (const data of allData) {
    const match = data.date.match(MONTHLY_DATE_REGEX)
    if (!match) {
      throw new Error(`Invalid date format detected: ${data.date}`)
    }
    const monthYear = match[1]
    if (!monthMaxValues[monthYear] || monthMaxValues[monthYear].date < data.date) {
      monthMaxValues[monthYear] = data
    }
  }
  return Object.values(monthMaxValues)
}

This function relies on properly formatted dates, which are ensured by using a regular expression. It constructs an object that stores each year/month combination as keys and the maximum value for that year/month as the corresponding values. The advantage of using ISO format dates like this is that they can be sorted alphabetically, allowing for easy comparison of date strings.

Code Playground

Answer 4

const MONTHLY_DATE_REGEX = /(\d{4}-\d{2})-\d{2}/

const extractMonthlyData = (allData: Timeseries[]): Timeseries[] => {
  const monthMaxValues: Record<string, Timeseries> = {}
  for (const data of allData) {
    const match = data.date.match(MONTHLY_DATE_REGEX)
    if (!match) {
      throw new Error(`Invalid date format detected: ${data.date}`)
    }
    const monthYear = match[1]
    if (!monthMaxValues[monthYear] || monthMaxValues[monthYear].date < data.date) {
      monthMaxValues[monthYear] = data
    }
  }
  return Object.values(monthMaxValues)
}

This function relies on properly formatted dates, which are ensured by using a regular expression. It constructs an object that stores each year/month combination as keys and the maximum value for that year/month as the corresponding values. The advantage of using ISO format dates like this is that they can be sorted alphabetically, allowing for easy comparison of date strings.

Code Playground

Getting the data from the final day of every month in a Typescript time-series object array

Answer №1

Answer №2

Similar questions

Issue with Angular 11: Unable to bind to 'ngForOf' as it is not recognized as a valid property of 'tr' element

Ways to limit the combination of general types in Typescript?

How can I subscribe to nested JSON objects in Angular?

The interconnectivity between ngAfterViewInit in Angular's LifeCycle and observables

Ongoing state configuration in a React hook

Decorating AngularJS' ExceptionHandler with TypeScript is not feasible because a function is not identified as such

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Ways to simulate a variable imported in the module being tested without it being a function parameter can be achieved by using describe.each and changing the mock value for each test

Implementing validation logic on button click using TypeScript

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

Utilize Knex to retrieve data from the req.query

The Angular TypeScript service encounters an undefined issue

I am encountering issues with running my tests using react-testing-library alongside TypeScript

Moving from Http to HttpClient in Angular4Changeover your Angular4

The interaction between Nextjs router and useEffect resulting in unintended re-rendering

center a horizontal line using StyledSheets in your project

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

Can anyone provide a solution for fixing TypeScript/React error code TS7053?

Typegoose's representation of modifying data

Converting language into class components using ngx-translate in Angular