How to return specific year from Date array ? react

Viewed 624

I've got a dates array and I wanted to create a function that returns all the dates from 2014 or 2015 depending on what the user clicks

i tried using substring(), although that gives me an array of the 2014 dates, it also returns 2 undefined's which I dont want. How would I return an array of only 2014 dates?

const datefunc = () => {
  const date = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4']

  const dates = date.map((d) => {
    if (d.substring(0, 4) === '2014') {
      return d;
    }
  })

  console.log(dates)
}

datefunc()

6 Answers

Array.map modifies each element in an array => when you run date.map and only return a value if the date starts with '2014', all the other values in the array will become undefined.

Array.filter filters the elements in an array based on a predicate => when running date.filter, all the elements for which the predicate is false will be excluded in the returned array.

Changing your code to this should work:

const datefunc = () => {
  const date = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4'];

  const dates = date.filter((d) => d.substring(0, 4) === '2014');

  // You could also use this
  // const dates = date.filter((d) => d.startsWith('2014'));

  console.log(dates);
  
}

datefunc();

If your dates aren't all of the same form, but all valid date strings you could also tranfsorm them into Date values and then filter them like this:

const datefunc = () => {
  const date = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4'];

  const dates = date
    .map((d) => new Date(d))
    .filter((d) => d.getFullYear() === 2014);

  console.log(dates);
}

datefunc();

const datefunc = () => {
  const date = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4']

  const dates = date.filter((d) => d.substring(0, 4) === '2014')

  console.log(dates)
}

datefunc()

A more robust way to do this would be to convert string to date. Also, since you need to filter out dates, map wouldn't really work here. Even for false conditions, even though you are not returning anything, you end up returning undefined anyways. That's why those two undefined values

const datefunc = () => {
  const date = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4']
  const targetYears = [2014, 2015]; // Add the years here which you want to filter on
  const dates = date.filter((d) => {
    const curYear = new Date(d).getFullYear();
    return targetYears.includes(curYear);
  })

  console.log(dates)
}

datefunc()

const datesInYear = (dates, year) => {
  return dates.filter((x) => x.includes(year));
};

const dates = ["2014-4-4", "2014-5-4", "2015-4-4", "2015-3-4"];
console.log(datesInYear(dates, "2014"));

You can add the years you want in the filteredYears array

const datefunc = () => {
  const dates = ['2014-4-4', '2014-5-4', '2015-4-4', '2015-3-4']
  const filteredYears = [2014];
  const filteredDates = dates.filter(date => filteredYears.includes(new Date(date).getFullYear()));

  console.log(filteredDates)
}

datefunc()

You may convert datestring to date type first, then make use "filter()" to get particular year date. Hopefully this helps you!

date = ["2014-4-4", "2014-5-4", "2015-4-4", "2015-3-4"];
convertedDate: Date[] = [];

getYearList() {
    this.date.forEach(x => {
      this.convertedDate.push(new Date(x));
    });

    this.convertedDate = this.convertedDate.filter(
      x => x.getFullYear() == 2014
    );
    console.log(this.convertedDate);
}
Related