Filter JavaScript elements by conditions and true/false values

I can't quite recall the answer to this at the moment.

Consider an array of Vendors (this is just placeholder data):

[
  {
    "user_updated": null,
    "user_created": "128a84b5-275c-4f00-942e-e8ba6d85c60e",
    "date_created": "2021-03-13T23:41:09Z",
    "date_updated": null,
    "website": "www.example.com",
    "payment_information": "IBAN: THEIR1234IBAN567",
    "tax_id": null,
    "vat_id": "1234567890",
    "services": "Produzione video, animazioni",
    "name": "Video Productions Ltd.",
    "address": "Viale Lorenteggio, 20\nMilano 20142",
    "notes": "Competenze di alto livello",
    "id": 1,
    "inactive": false
  }
]

I am trying to filter by name, services, and website using:

data() {
  return {
    filter: ''
  }
},
computed: {
  filteredVendors() {
    return this.vendors.filter(({name, notes, services, website}) => {
      const filter = this.filter.toLowerCase()

      return (
        name.toLowerCase().includes(filter) || notes.toLowerCase().includes(filter)... // continue for other fields
      )
    })
  }
}

However, I'm having trouble filtering based on the boolean field (inactive). How can I filter for either inactive=false or inactive=true?

UPDATE: I managed to solve it with this method, but I'm unsure if it's efficient. https://i.sstatic.net/ffEGg.png

Thank you!

Answer №1

To sort through a dataset:

data.filter(x => x.inactive)

const data = [
{
    "user_updated": null,
    "user_created": "128a84b5-275c-4f00-942e-e8ba6d85c60e",
    "date_created": "2021-03-13T23:41:09Z",
    "date_updated": null,
    "website": "www.example.com",
    "payment_information": "IBAN: THEIR1234IBAN567",
    "tax_id": null,
    "vat_id": "1234567890",
    "services": "Video production, animations",
    "name": "Creative Media Inc.",
    "address": "123 Main Street\nLos Angeles, CA 90001",
    "notes": "High-level skills",
    "id": 2,
    "inactive": true
}
];

console.log(data.filter(x => x.inactive))

console.log(data.filter(x => x.id == 2))

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

Tips for accessing nested documents from Firebase in React.js

Here is a snippet of code from my React project: import React, { useState } from "react"; import { db } from "../firebase"; import { collection, Firestore, getDocs } from "firebase/firestore"; function Document() { const ...

Having difficulty entering text in the modal text box and updating it with a new state

Within my render method, I am utilizing the following model: { showEditModal && <Modal toggleModal={this.togglePageModal} pageModal={true}> <h2 style={{ textAlign: "center", width: "100%" }}> ...

Retrieve data from the MySQL database based on the search input field and dynamically update the options in the

I'm facing a programming challenge that I perceive to be at an advanced level for me. Currently, I have a custom search field in my registration form. However, I am looking to transform it into a dropdown menu that pulls user values from MySQL databas ...

Unraveling exceptions in Node.js akin to handling them in Java

I'm seeking to develop a node application and I need guidance on exception handling. In Java, we utilize the exception class for this purpose. How can I achieve something similar in node? Are there any libraries available specifically for handling exc ...

Tips for sending API requests as an object rather than an array

Hello there! I'm having trouble posting the data as an object. I attempted to adjust the server code, but it keeps throwing errors. Here is a snippet of the server code: const projectData = []; /* Other server setup code */ // GET route app.get(&a ...

What is the best way to bring a JavaScript file from the source file into an index.html document

I am currently in the process of developing a system using React, and as someone new to the framework, I have encountered an issue. I need to include a JavaScript file in my index.html that is located within the src folder. This js file is essential for th ...

Copy values of multiple input fields to clipboard on click

I have a collection of buttons in my Library, each with different text that I want to copy when clicked function copyTextToClipboard(id) { var textElement = document.getElementById(id); textElement.select(); navigator.clipboard.writeText(textElement. ...

Updating WordPress div content based on selected post type using dropdown menu

I am in the process of developing a WordPress plugin that will generate a custom post type and widget for users to add to their websites. The goal is to have the widget display a dropdown select box with titles of each post, and when a title is selected, t ...

Executing a jQuery AJAX function when the timeout occurs

My goal is to dynamically reload my jQuery DataTables without having to refresh the entire page in order to fetch new data. Here's the initial function I have set up to kick off the process: $(document).ready(function() { $.ajax({ url:&apo ...

CompletePage script, individual automatic scrolling

Having trouble with my fullPage.js implementation. I have a total of 5 sections and I'm trying to set different scrolling behaviors for each section. Specifically, I want Sections 1 through 3 to auto-scroll and Section 4.1 to 4.2 to use normal scroll. ...

"Make your slides smooth and responsive with the unslick option in slick

Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...

What is the best way to reset the selected label in a React Material AutoComplete component when the state is

I currently have a state declared as: const [searchEntryNo, setSearchEntryNo] = useState(''); In addition, there is a function set up to clear the state when needed. const handleClear = () => { setSearchEntryNo(''); }; Ne ...

What is the process for executing Selenium IDE scripts in Selenium RC?

As a newcomer to using the selenium testing tool, I am seeking guidance on running selenium IDE scripts within selenium RC. I would greatly appreciate examples and screenshots to help me better understand the process. ...

Web Browser cross-origin AJAX requests

Recently, I developed an Internet Explorer extension that injects a script every time a page is accessed. The purpose of this script is to send an AJAX request to my localhost. However, I have encountered a roadblock where the request only works if it&apos ...

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

What is the best way to use scrollIntoView() to display an additional item at the top or bottom of the visible area

When implementing scrollIntoView() with navigation buttons (up and down), I aim to display two items at a time to signal to the user that there are more items to navigate. However, the first and last items should retain their default behavior so the user u ...

The nested promise.all function is executing synchronously instead of asynchronously as anticipated

Within the nested Promise.all section of my NodeJs script, I believe there is an error. The script is designed to process multiple .csv files within a directory, creating a database record for each row. If a row fails processing, it is added to a list of f ...

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

How to transform an image into a base64 string using Vue

I am having trouble converting a local image to base64. The function reader.readAsDataURL is not working for me. Instead of the image data, I always get 'undefined' assigned to the rawImg variable. The file variable contains metadata from the upl ...

Find the differences between the values in two arrays of objects and eliminate them from the first array

const arrayOne = [ { id: 22, value: 'hello' }, { id: 33, value: 'there' }, { id: 44, value: 'apple' } ]; const arrayTwo = [ { id: 55, value: 'world' }, { id: 66, value: 'banana' }, ...