Question 50660 in Javascript Question posted in
A very good W3school tutorial can be found here.

Filter function don't return proper amount of elements – Javascript

I have mockedData like below:

export const MOCKED_TRANSACTION_HISTORY = [
  {
    id: 1,
    transactionDate: '01 / 03 / 2023',
    transactionType: 'payment',
    transactionValue: 1000,
    currency: 'PLN',
  },
  {
    id: 2,
    transactionDate: '01 / 01 / 2023',
    transactionType: 'withrawal',
    transactionValue: 50,
    currency: 'PLN',
  },
  {
    id: 3,
    transactionDate: '03 / 04 / 2023',
    transactionType: 'withrawal',
    transactionValue: 50,
    currency: 'PLN',
  },
  {
    id: 4,
    transactionDate: '01 / 04 / 2023',
    transactionType: 'withrawal',
    transactionValue: 50,
    currency: 'PLN',
  },
  {
    id: 5,
    transactionDate: '02 / 04 / 2023',
    transactionType: 'payment',
    transactionValue: 510,
    currency: 'EUR',
  },
  {
    id: 6,
    transactionDate: '01 / 10 / 2021',
    transactionType: 'payment',
    transactionValue: 150,
    currency: 'EUR',
  },
  {
    id: 7,
    transactionDate: '01 / 01 / 2019',
    transactionType: 'withrawal',
    transactionValue: 510,
    currency: 'EUR',
  },
];

My aim is to filter from mockedData elements which transactionDate is between provided startDate and endDate passed as params in useParams from react-router-dom.
Below is the output from the console, both are typeof strings

startDate: 01.03.2023;
endDate: 30.04.2023

then I change startDate and endDate to be typeof object and I create fromDate and toDate variables.

  const startDateParts = startDate.split('.');
      const startDateAsDate = new Date(
        Number(startDateParts[2]),
        Number(startDateParts[1]) - 1,
        Number(startDateParts[0]),
      );
      const endDateParts = endDate.split('.');
      const endDateAsDate = new Date(
        Number(endDateParts[2]),
        Number(endDateParts[1]) - 1,
        Number(endDateParts[0]),
      );

      const fromDate = Math.min(startDateAsDate.getTime(), endDateAsDate.getTime());
      const toDate = Math.max(startDateAsDate.getTime(), endDateAsDate.getTime());

For provided startDate and endDate those are fromDate and toDate:
from 1677625200000;
to 1682805600000

Can You please let me know why with below code comparison variable returns just an element with id:3 from mockedData

const [filteredData, setFilteredData] = useState<any | undefined>([]);
const data = MOCKED_TRANSACTION_HISTORY;

const comparison = data.filter((singleTransaction) => {
            const date = new Date(singleTransaction.transactionDate);
            console.log('transaction', date.getTime());
            return date.getTime() <= toDate && date.getTime() >= fromDate;
          });
setFilteredData(comparison);
console.log('comp:', comparison);

Although as You can see in mockedData there should be 4 elements ?

thanks

Tags:

3

Answers


  1. 0

    Date format used in MOCKED_TRANSACTION_HISTORY is different from the format used for startDate and endDate. The date format in MOCKED_TRANSACTION_HISTORY uses slashes (‘/’) while the startDate and endDate use periods (‘.’). Due to this, the new Date() function is not correctly interpreting the date strings.

    Convert the transactionDate in MOCKED_TRANSACTION_HISTORY to a unified format:

    const parseDate = (dateString) => {
  const dateParts = dateString.split(/[/s]+/);
  return new Date(
    Number(dateParts[2]),
    Number(dateParts[1]) - 1,
    Number(dateParts[0]),
  );
};

    This function will work with both formats (slashes and periods) and return a proper Date object.

    Update the comparison variable:

    const comparison = data.filter((singleTransaction) => {
  const date = parseDate(singleTransaction.transactionDate);
  console.log('transaction', date.getTime());
  return date.getTime() <= toDate && date.getTime() >= fromDate;
});
    Login or Signup to reply.
  2. 0

    The following – admittedly very short – script will get you exactly the 4 elements that you expect:

    const dlimits=[1677625200000,1682805600000].map(v=>new Date(v));
console.log(dlimits);
const mth = [{
id: 1,
transactionDate: '01 / 03 / 2023',
transactionType: 'payment',
transactionValue: 1000,
currency: 'PLN',
  },
  {
id: 2,
transactionDate: '01 / 01 / 2023',
transactionType: 'withrawal',
transactionValue: 50,
currency: 'PLN',
  },
  {
id: 3,
transactionDate: '03 / 04 / 2023',
transactionType: 'withrawal',
transactionValue: 50,
currency: 'PLN',
  },
  {
id: 4,
transactionDate: '01 / 04 / 2023',
transactionType: 'withrawal',
transactionValue: 50,
currency: 'PLN',
  },
  {
id: 5,
transactionDate: '02 / 04 / 2023',
transactionType: 'payment',
transactionValue: 510,
currency: 'EUR',
  },
  {
id: 6,
transactionDate: '01 / 10 / 2021',
transactionType: 'payment',
transactionValue: 150,
currency: 'EUR',
  },
  {
id: 7,
transactionDate: '01 / 01 / 2019',
transactionType: 'withrawal',
transactionValue: 510,
currency: 'EUR',
  },
];

console.log(mth.filter(e=>{
 const d=new Date(...e.transactionDate.split(/[/.]/).map((p,i)=>i==1?p-1:+p).reverse());
 return d>=dlimits[0] && d<=dlimits[1];
}));
    Login or Signup to reply.
  3. 0

    Here , I update logic and all 4 records are got , you can reefer my solution

    import React from "react";
import { MOCKED_TRANSACTION_HISTORY as transactionData } from "./data/MOCKED_TRANSACTION_HISTORY";
function App() {
  const startDate = "01.03.2023";
  const endDate = "30.04.2023";
  const startDateAsDate = new Date(startDate.split(".").reverse().join("-"));
  const endDateAsDate = new Date(endDate.split(".").reverse().join("-"));

  const comparison = transactionData.filter((singleTransaction) => {
    const date = new Date(
      singleTransaction.transactionDate.split(" / ").reverse().join("-")
    );
    return (
      date.getTime() >= startDateAsDate.getTime() &&
      date.getTime() <= endDateAsDate.getTime()
    );
  });
  console.log(comparison);
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search