Using Lodash to filter a deeply nested array by passing in a custom function

Question

Using Lodash to filter a deeply nested array by passing in a custom function

Is there a way to extract only the items in the nested arrays that meet a specific criteria or expression?

I've looked at the following links, but the solutions provided do not seem to work with _.filter:

Find object by match property in nested array

lodash property search in array and in nested child arrays

Lodash - Search Nested Array and Return Object

Let me provide more context. I have data structured like this: How can I retrieve the items inside the "listEvents" array for all objects that match a certain criteria?

[
  {
    "ModalidadeId": 1,
    "Nome": "SOCCER",
    "Ordem": "09",
    "IconeId": "",
    "listEvents": [
      {
        "EI": 2960542,
        "No": "SÃO PAULO SP X ATLÉTICO LINENSE-SP",
        "St": 1,
        "Ini": "2017-09-30T10:00:00",
        "MI": 1,
        "CI": 251,
        "TI": 4993,
        "StAV": 0,
        "De": false,
        "Ics": [
          "p22678",
          "p22684"
        ],
        "Ic": "",
        "Tas": [],
        "show": true,
        "IniFormatada": "30/09/2017 às 10:00:00",
        "MN": "FUTEBOL"
      },
      ...
    ]
  },
  {
    "ModalidadeId": 2,
    "Nome": "TENIS",
    "Ordem": "09",
    "IconeId": "",
    "listEvents": [
      {
        "EI": 2960542,
        "No": "SÃO PAULO SP X ATLÉTICO LINENSE-SP",
        "St": 1,
        "Ini": "2017-09-30T10:00:00",
        "MI": 1,
        "CI": 251,
        "TI": 4993,
        "StAV": 0,
        "De": false,
        "Ics": [
          "p22678",
          "p22684"
        ],
        "Ic": "",
        "Tas": [],
        "show": true,
        "IniFormatada": "30/09/2017 às 10:00:00",
        "MN": "FUTEBOL"
      },
      ...
    ]
  }
]

This is the code snippet I've attempted, but it doesn't seem to be functioning properly.

_.filter($scope.listModalities, _.flow(
            _.property('listEvents'),
            _.partialRight(_.filter, function (o) {
              var eventDate = new Date(o.Ini);
              eventDate.setHours(eventDate.getHours() - 24);
              var now = new Date();
              return o.De == true || eventDate < now;
            })
          ));

javascript angularjs arrays nested lodash

Answer 1

Answer №1

To optimize your code, consider mapping to listEvents and then flattening the array in order to eliminate one iteration loop and achieve the desired results:

var now = new Date();
var listEvents = _.chain(input).map((o) => o.listEvents).flatten().filter((o)=> {
  if(o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

now = null;

I have also optimized the equality check o.De === true so that the function terminates early if the condition is met. Furthermore, I moved the declaration of now outside of the loop for efficiency.

Take a look at this pen for reference.

If you prefer an alternative, here's how the code would appear in ES5:

var now = new Date();
var listEvents = _.chain(input).map(function (o) {
  return o.listEvents;
}).flatten().filter(function (o) {
  if (o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

Here is another pen demonstrating this method.

Additionally, for further optimization suggested in the comments, you can utilize flatMap to streamline the process:

var now = new Date();
var listEvents = _.chain(input).flatMap('listEvents').filter(function (o) {
  if (o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

console.log(listEvents);

Check out this pen for a demonstration.

Answer 2

To optimize your code, consider mapping to listEvents and then flattening the array in order to eliminate one iteration loop and achieve the desired results:

var now = new Date();
var listEvents = _.chain(input).map((o) => o.listEvents).flatten().filter((o)=> {
  if(o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

now = null;

I have also optimized the equality check o.De === true so that the function terminates early if the condition is met. Furthermore, I moved the declaration of now outside of the loop for efficiency.

Take a look at this pen for reference.

If you prefer an alternative, here's how the code would appear in ES5:

var now = new Date();
var listEvents = _.chain(input).map(function (o) {
  return o.listEvents;
}).flatten().filter(function (o) {
  if (o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

Here is another pen demonstrating this method.

Additionally, for further optimization suggested in the comments, you can utilize flatMap to streamline the process:

var now = new Date();
var listEvents = _.chain(input).flatMap('listEvents').filter(function (o) {
  if (o.De === true) return true;
  var eventDate = new Date(o.Ini);
  eventDate.setHours(eventDate.getHours() - 24);
  return eventDate < now;
}).value();

console.log(listEvents);

Check out this pen for a demonstration.

Answer 3

Answer №2

Perhaps you could experiment with using vanilla JavaScript

let eventList = []

data.forEach((item) => {
item.events.forEach((event) => {
     let eventDate = new Date(event.start);
     eventDate.setHours(eventDate.getHours() - 24);
     let now = new Date();
     if(event.done == true || eventDate < now){
        eventList.push(event);
     }
  })
})

Answer 4

Perhaps you could experiment with using vanilla JavaScript

let eventList = []

data.forEach((item) => {
item.events.forEach((event) => {
     let eventDate = new Date(event.start);
     eventDate.setHours(eventDate.getHours() - 24);
     let now = new Date();
     if(event.done == true || eventDate < now){
        eventList.push(event);
     }
  })
})

Using Lodash to filter a deeply nested array by passing in a custom function

Answer №1

Answer №2

Similar questions

Is it possible to use jQuery/JS to automatically format currency input as it is typed, adding a 1000 separator and ensuring

Tips for adding one document to two separate collections using JavaScript and MongoJS

C implementation of a pseudo-generic dynamic array list that crashes at the end while attempting to delete resources

When a link is right-clicked, the window.opener property becomes null

Assigning state values in React based on an array in ES6

How to Pass an Array of Structs as a Return Value in C

What is the best way to customize the spacing of grid lines in chartist.js?

Load images easily using jQuery

What steps can I take to create a bar that animates in just 1 second using HTML, CSS, and JavaScript?

What is the optimal method for organizing JavaScript and CSS files within my Play2 application?

How to handle the Conflict in jest snapshot testing when the source is deleted and target is modified?

Guide on activating an event when a slider image is updated using jquery

strtok vanishing after returning -1

Is there a way to maintain the checked status of the checkboxes after a page refresh?

Using Three.js to ensure that child object3d expands within the boundaries of its parent object

Distinguishing between a regular JavaScript variable and one annotated with a dollar sign

Set the state of a nested array object within SectionList data using the index

I am on the lookout for a spell-checking tool that can seamlessly integrate with both Django and Python 2.7

The POST response I received was garbled and corrupted

What is the best way to interpret a nested JSON object?