What is the best way to apply multiple conditions to filter an array efficiently?

Looking to filter an array with multiple conditions? I have several checkboxes pre-checked and I need to filter based on start_date and end_date:

  • future:
    start_date is after today

    past: end_date is after today's date

    in_progress: start_date is today or later, but end_date is not past today's date

<input v-model="future" type="checkbox" />
<input v-model="past" type="checkbox" />
<input v-model="in_progress" type="checkbox"/>

data: function () {
  return {
    past: true,
    future: true
    in_progress: true
    items: [
   {
      "name":"Test",
      "start_date":""2022-01-01T07:00:00-08:00"",
      "end_date":""2022-03-01T07:00:00-08:00"",
      "id":"2asfa3r9adsgu83yf83"
   },
   {
      "name":"Test",
      "start_date":""2020-01-01T07:00:00-08:00"",
      "end_date":""2020-02-01T07:00:00-08:00"",
      "id":"1asfa3r9adsgu83yf83"
   },
   {
      "name":"Test",
      "start_date":""2021-10-12T07:00:00-08:00"",
      "end_date":""2022-10-19T07:00:00-08:00"",
      "id":"6asfa3r9adsgu83yf83"
   },
]
  }
}
javascriptvue.js

Answer №1

when in_progress

const tasks = [
   {
      "name":"Assignment",
      "start_date":"2022-01-01T07:00:00-08:00",
      "end_date":"2022-03-01T07:00:00-08:00",
      "id":"2asfa3r9adsgu83yf83"
   },
   {
      "name":"Project",
      "start_date":"2020-01-01T07:00:00-08:00",
      "end_date":"2020-02-01T07:00:00-08:00",
      "id":"1asfa3r9adsgu83yf83"
   },
   {
      "name":"Presentation",
      "start_date":"2021-10-12T07:00:00-08:00",
      "end_date":"2022-10-19T07:00:00-08:00",
      "id":"6asfa3r9adsgu83yf83"
   },
]

const in_progress_tasks = tasks.filter(task => Date.now() > new Date(task.start_date) && Date.now() < new Date(task.end_date))
console.log(in_progress_tasks)

Answer №2

To filter the array, you can utilize the .filter() method.

const data = () => {
  return {
    past: true,
    future: true,
    in_progress: true,
    items: [
   {
      name:"Test1",
      start_date:"2022-01-01T07:00:00-08:00",
      end_date:"2022-03-01T07:00:00-08:00",
      id:"2asfa3r9adsgu83yf83"
   },
   {
      name:"Test2",
      start_date:"2020-01-01T07:00:00-08:00",
      end_date:"2020-02-01T07:00:00-08:00",
      id:"1asfa3r9adsgu83yf83"
   },
   {
      name:"Test3",
      start_date:"2021-10-12T07:00:00-08:00",
      end_date:"2022-10-19T07:00:00-08:00",
      id:"6asfa3r9adsgu83yf83"
   },
]
  }
}

let tempItems = data().items
const newtempItems = tempItems.filter(item => Date.parse(item.start_date) >= Date.now())
console.log(newtempItems);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to automatically update React.js state when localStorage changes occur

Is it possible to automatically update the data on the cart page whenever there are changes made to the myCart array in localStorage? Below is the code that I am currently using: const [cart, setCart] = React.useState([]) React.useEffect(() => { se ...

javascriptreactjslocal-storagenext.js

guaranteed function to retrieve React elements

Is there a solution for the issue where if-else doesn't work in run build but works in run dev? The only way I've found to make it work is by using a react hook, but I'm unsure which one to use and where to implement it. import { useAdd ...

javascriptreactjsnext.js

Unable to dynamically validate the input field for the name using Angular.js

Can someone assist me with an issue I'm having? I'm encountering an error while trying to dynamically validate input fields using Angular.js. Error: TypeError: Cannot read property '$invalid' of undefined Let me explain the code t ...

javascriptangularjsvalidation

Empty req.body object in Node.js

I came across this code snippet: const bodyParser = require("body-parser"); const express = require("express"); const app = express(); app.use(express.json()); app.use(bodyParser.json()); app.post("/api/foo", (request, response) => { let foo = { ...

javascriptnode.jsexpress

In VueJS, ensure that any updates to the data in the parent component are seamlessly passed on to its child components

Is there a way to pass down updates in data values from a parent component to its child components whenever the parent's value changes in Vue.js? I have 3 custom components that need to display the most up-to-date value of the parent component. By the ...

vue.jsparent-child

Using Rails and Haml to Implement Smooth Scrolling with Jquery and CoffeeScript

Looking to accomplish a straightforward task using CoffeeScript, Rails, and Haml. While I don't have much experience with CoffeeScript, I'm eager to experiment. The goal is to have the view scroll to a specific div id when a button is pressed. A ...

javascriptjqueryruby-on-railscoffeescripthaml

Is it possible to implement hierarchical validation within reactflow nodes?

I am currently utilizing reactflow to establish a network of sequences, each possessing their own unique "levels." My primary objective is to restrict connections between sequences based on their respective levels. For instance, a level 5 sequence should ...

javascriptnode.jsreact-flow

The function os.platform in React and Electron mistakenly identifies the browser as the operating system instead of the actual OS

In my quest to locate the appdata folder for the application, I encountered a challenge where each operating system has a different path for the appdata or application support folder. To address this, I attempted to identify the OS type in order to deter ...

javascriptnode.jsreactjselectronoperating-system

What is the best way to use AJAX to load a PHP file as a part

I'm exploring different methods for making an AJAX call with an included file. Let's create a simple working example. Initially, I have my main index.php file which contains the following content. In this file, I aim to access all the data retur ...

javascriptphpjqueryajax

Continuously inserting new records to a JSON file using a while loop

Is there a way to continuously add key value pairs to a JSON object within a while loop? var sName = "string_"; var aKeys = ["1", "2", "3"]; var sKey = "key"; var n = 1; var aObj = {}; var l = aKeys.length; for(let i=0; i < l; i++){ while(n < 5) ...

javascriptjson

How can we verify the validity of URLs based on their length, presence of capital letters, and specific whole words?

I'm currently working on a piece of code that verifies the URL provided by users during sign-up for my application. I want to implement the following restrictions: URL must be at least 3 characters long No capital letters allowed Avoid certain words ...

phpjavascriptregex

Discover the route connecting two points. The current maze algorithm is operating at a sluggish

I'm in the process of developing an algorithm to identify the most efficient route between two points within a maze, but I've hit a snag with its current speed. Here's what I've done so far: Auxiliary classes: import { Coord } from " ...

javascripttypescriptpath-findingmaze

Leveraging Ajax and jQuery to create a POST request for adding a new record to a MySQL table within a Node.js server

My form is designed to collect user information like name, age, and more. The aim is to submit this data from the client side, inserting it into a MySQL table row. However, I'm facing difficulties in getting the data to successfully insert. Below are ...

javascriptjquerymysqlajaxexpress

AngularJS: A guide to clicking with the mouse and using the Enter key on the ng-grid

Working with ng-grid in angular and I'm wondering how I can successfully select a row by clicking with the mouse and then pressing Enter. Currently, pressing Enter changes the selected row, which is not the desired behavior. I'm looking to have ...

javascriptangularjsclickng-gridenter

I'm intrigued by this maneuver, but I am uncertain about its safety when used in JavaScript

I am currently contemplating the safety and reliability of assigning a variable within an if statement across different browsers. If it proves to be safe, then I am inclined to proceed with its usage. The scenario involves reading the query string and che ...

javascriptcross-browser

Deactivating the class from a button

On my website, I have 3 buttons that represent different product categories. The initial state of the page should load with the "All Products" button having an active class. However, when clicked, this active class should be removed from the "All Products" ...

javascript

The comparison between utilizing an anonymous function in a loop and a named function

When running a function with a callback in a loop, I am debating between using an anonymous function or a named function. Take a look at the code snippets below: Anonymous function for(let i=0;i<50;i++){ example_func(param1,param2,()=>{ }); } Name ...

javascript

Organizing data in a Vue 3 table using the Composition API and v-for loop

I managed to display a table of my object array with this code snippet: <div class="table-responsive"> <table ref="tbl" border="1" class="table"> <thead ...

vue.jssortingvuejs3vue-composition-api

JavaScript functions unable to effectively update data

When I click a button, I want to send an Ajax request, but it seems like my request is never executed. Here's the HTML code I have: <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ... I& ...

javascriptphphtmljqueryajax

IE is causing issues with parseInt, returning NaN, while Chrome is working properly with it

When attempting to convert a date in a string to a Unix timestamp integer, I encountered an issue. While using parseInt successfully changed the string to an integer in Chrome, Internet Explorer and Edge returned NaN. If you'd like to see the code sn ...

javascriptjquerygoogle-chromeinternet-explorermicrosoft-edge