Home > other >  Filter an array of objects by key and nested value in JavaScript
Filter an array of objects by key and nested value in JavaScript

Time:12-07

I have an array of Objects relating to events. The events are organised by key/value where the Key is a DateTime of the beginning of the month, and the value is an Array or objects which have a specific DateTime within that month.

allEvents = [
    {
        key: "Dec 2021",
        value: [
            { id: 0, date: "Dec 06 2021" },
            { id: 1, date: "Dec 01 2021" },
        ],
    },
    {
        key: "Nov 2021",
        value: [
            { id: 0, date: "Nov 27 2021" },
            { id: 1, date: "Nov 23 2021" },
            { id: 2, date: "Nov 10 2021" },
        ],
    },
    {
        key: "Oct 2021",
        value: [
            { id: 0, date: "Oct 27 2021" },
            { id: 1, date: "Oct 23 2021" },
            { id: 2, date: "Oct 10 2021" },
        ],
    },
];

I need to filter these events by a given date range, eg Nov 15 2021 - Dec 04 2021

This should filter out the October object and also any events which fall within the given date Range while keeping the parent object. So the result would be:

filteredEvents = [
    {
        key: "Dec 2021",
        value: [
            { id: 1, date: "Dec 01 2021" },
        ],
    },
    {
        key: "Nov 2021",
        value: [
            { id: 0, date: "Nov 27 2021" },
            { id: 1, date: "Nov 23 2021" },
        ],
    },
];

So far, I've got the filtering done at the month level as below, but can't figure out how to handle the day level.

const dateRange = ["Nov 15 2021", "Dec 04 2021"];
const min = dateRange[0].getTime();
const max = dateRange[1].getTime();

const filteredEvents = allEvents.filter(
  eventGroup => new Date(eventGroup.key).getTime() >= min && new Date(eventGroup.key).getTime() <= max);

Ideally would like to just use ES6, but can use lodash.

CodePudding user response:

This looks a little unwieldy but it's pretty simple. First, map your array and filter out any value.date that do not fit in the range. Then simply filter out any parent elements that have a zero-length value array.

const filteredEvents = (from, to) => allEvents
  .map( g => 
     ({...g, 
       value: g.value.filter(f => 
         new Date(f.date).getTime() >= new Date(from).getTime() && 
         new Date(f.date).getTime() <= new Date(to).getTime())
      }))
  .filter(f => f.value.length>0);

let allEvents = [{
    key: "Dec 2021",
    value: [{
        id: 0,
        date: "Dec 06 2021"
      },
      {
        id: 1,
        date: "Dec 01 2021"
      },
    ],
  },
  {
    key: "Nov 2021",
    value: [{
        id: 0,
        date: "Nov 27 2021"
      },
      {
        id: 1,
        date: "Nov 23 2021"
      },
      {
        id: 2,
        date: "Nov 10 2021"
      },
    ],
  },
  {
    key: "Oct 2021",
    value: [{
        id: 0,
        date: "Oct 27 2021"
      },
      {
        id: 1,
        date: "Oct 23 2021"
      },
      {
        id: 2,
        date: "Oct 10 2021"
      },
    ],
  },
];


const filteredEvents = (from, to) => allEvents
  .map( g => ({...g, value: g.value.filter(f => new Date(f.date).getTime() >= new Date(from).getTime() && new Date(f.date).getTime() <= new Date(to).getTime())})).filter(f => f.value.length>0);

console.log(filteredEvents("Nov 15 2021", "Dec 04 2021"));
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

for one thing,

const min = dateRange[0].getTime();
const max = dateRange[1].getTime();

needs to be:

const min = new Date(dateRange[0]).getTime();
const max = new Date(dateRange[1]).getTime();

Then, after the initial loop, I would do a map in order to remove elements from value. The logic would be very similar to the filter you already have.

CodePudding user response:

The values for each event have a full date. Use them to exclude dates outside the range, then exclude any events with no values.

const allEvents = [
    {
        key: "Dec 2021",
        value: [
            { id: 0, date: "Dec 06 2021" },
            { id: 1, date: "Dec 01 2021" },
        ],
    },
    {
        key: "Nov 2021",
        value: [
            { id: 0, date: "Nov 27 2021" },
            { id: 1, date: "Nov 23 2021" },
            { id: 2, date: "Nov 10 2021" },
        ],
    },
    {
        key: "Oct 2021",
        value: [
            { id: 0, date: "Oct 27 2021" },
            { id: 1, date: "Oct 23 2021" },
            { id: 2, date: "Oct 10 2021" },
        ],
    },
];

const dateRange = ["Nov 15 2021", "Dec 04 2021"];
const [min, max] = dateRange.map(d => new Date(d).getTime());

const filteredEvents = allEvents.map(({key,value}) => ({
    key,
    value:value.filter(({date:d}) => 
        new Date(d).getTime() >= min && new Date(d).getTime() <= max)
}))
.filter(({value:v}) => v.length);
  
console.log( filteredEvents );
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related