What methods can be used to search within one array in order to filter another array contained in a list?

Looking for suggestions on creating a filter in one list based on another list

How can I handle filtering an array within a list by searching in another array?

For example...

    myArray = [
      {
        "name": "Item-A", "tags":
          ["Facebook", "Google"]
      },
      {
        "name": "Item-B", "tags":
          ["Facebook", "Google", "Apple"]
      },
      {
        "name": "Item-C", "tags":
          ["Apple"]
      },
    ];

    //array for filter
    paramsFilter = ["Facebook", "Apple"];

    //expected result
    [
      {
        "name": "Item-B", "tags":
          ["Facebook", "Google", "Apple"]
      },
      {
        "name": "Item-C", "tags":
          ["Apple"]
      },
    ]
javascriptarraysangulartypescript

Answer №1

In the scenario where your filterarray is utilized by at least one (OR), you can structure it in the following way:

Utilize Array#filter for desired filtering and employ Array#some to retrieve all objects with a minimum of one hit.
If you prefer all filters instead, opt for Array#every instead.

myArray = [
  {
    "name": "Item-A", "tags":
    ["Facebook", "Google"]
  },
  {
    "name": "Item-B", "tags":
    ["Facebook", "Google", "Apple"]
  },
  {
    "name": "Item-C", "tags":
    ["Apple"]
  },
    {
    "name": "Item-D", "tags":
    ["Dell"]
  },
];

paramsFilter = ["Facebook", "Apple"];

let res = myArray.filter(({tags}) => tags.some(tag => paramsFilter.includes(tag)));
console.log(res);

Answer №2

Upon analyzing the question, it seems to have some inaccuracies. However, if we focus on understanding the question without considering the incorrect aspects, the following code snippet should provide a solution.

const myArray = [
  {
    "name": "Item-A", "tags":
      ["Facebook", "Google"]
  },
  {
    "name": "Item-B", "tags":
      ["Facebook", "Google", "Apple"]
  },
  {
    "name": "Item-C", "tags":
      ["Apple"]
  },
];

function filterArray(params) {
   return myArray.filter(i => i.tags.filter((n) => params.indexOf(n) > -1).length > 0);
}

console.log(filterArray(['Apple']))

Answer №3

One way to refine your array is by using the following method:

myArray.filter((element) => element.tags.join("")!== filterParams.join(""))

Answer №4

Gratitude for the abundance of advice and assistance. With the guidance from the provided examples, I successfully tackled the challenge using the code below:

myArray.filter(item => paramsFilter.every(tag => item.tags.some(option => option === tag)))

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

Encountering a range error above zero when working with a JSON array in Dart

When attempting to access position 1 of the array in my Flutter Dart code, I encounter a range error 0:1. Despite trying different methods to json.decode(data), I consistently receive the following error message: [ERROR:flutter/lib/ui/ui_dart_state.cc(14 ...

arraysjsonflutterdart

Develop a custom library within an Angular project without using Angular framework

I am looking to create a typescript library within my Angular project that I plan to later publish on npm. I have discovered that in Angular 6, the command ng generate library can be used to generate an npm-ready library, allowing for simultaneous developm ...

angularnpmangular6

Tips for utilizing the "get" method in React to submit a form

Is there a way to submit a form using the "get" method to an external URL in react? Similar to how it is done in HTML like in this example: https://www.example.com/form But instead, to a third party URL...? Can I achieve something like this? The goal is ...

javascriptreactjsjsx

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

While I'm not an expert in JS or jQuery, I'm currently working on coding a chat application that requires the following functionality: Retrieve conversation list through an AJAX call Display the conversations on the left side of the webpage aft ...

javascriptjquery

Injecting a variable into JavaScript using CodeIgniter

I've encountered an issue where I am unable to pass a variable from Codeigniter's view to the controller and then to the model for executing the necessary query to retrieve data from the database. Below is a snippet from my Controller: public f ...

javascriptphpajaxcodeigniterdatatables

Extract the element when the mouse is clicked

I'm currently working on developing a Chrome extension with a specific goal in mind: My aim is to capture the username when a user Ctrl-clicks on a username while browsing Reddit, and then transfer that username from the content script page to the ba ...

javascriptjquerygoogle-chrome-extension

Assign value to twig variable using JavaScript in Symfony version 3.4

Hello everyone, I am currently working on a form that is functioning well. However, I am facing an issue with setting the localization of a place manually using latitude and longitude values. To address this, I decided to create a map with a draggable mark ...

javascripttwig

TypeScript seems to be failing to detect the necessary checks before they are used

I've been pondering on how to ensure TypeScript acknowledges that I am verifying the existence of my variables before using them. Below is the code snippet : Here's the function responsible for these checks: function verifyEnvVars(){ if (!proc ...

typescript

Access specific data within a JSON array in PHP without the need for a foreach loop

Lately, I've been facing some challenges when it comes to decoding and interpreting the prices for specific items in the bitskins api. For instance, the OPSKINS API provides a straightforward output: {"status":1,"time":1477116462,"response":{"AK-47 ...

phparraysjsonapidecode

Craft a unique typings file tailored to your needs

After recently creating my first published npm package named "Foo", I encountered some difficulties while trying to consume it in a TypeScript project. The tutorials on how to declare modules with custom typings were not clear enough for me. Here are the k ...

node.jstypescript

If the user is not authenticated, Node.js will redirect them to the login page

I've integrated the node-login module for user login on my website. Once a user logs in, the dashboard.html page is rendered: app.get('/', function(req, res){ // Check if the user's credentials are stored in a cookie // if (req.coo ...

javascriptnode.jsexpress

Tips for showing user data following form submission to a SQL database using React JS

Hey everyone, I'm currently working on a project that involves user registration and login. Once the users complete these steps, they are required to fill out an additional form which is displayed below. After submitting this form, the data is stored ...

javascriptmysqlnode.jsreactjsexpress

Develop objects with a fixed position - three.js

I am currently working on a game utilizing the three.js library and I have a specific requirement. I would like to incorporate a small "panel" on the screen that remains stationary regardless of the user's navigation through the 3D environment. Essent ...

javascriptthree.jswebglpanelclickable

Animating targeted elements in Angular 2

I am working with 2 components: The first component contains a router-outlet where pages with a question and 3 possible answers are injected. The second component is a preview that consists of 20 boxes. I utilize a shared service (BehaviorSubject) fo ...

angularangular2-animation

Adding a file to the model.module.ts registration process

After diving into an Angular 6 book and grasping the concept of registering classes, there's this particular syntax highlighted in the image below that threw me off. Can anyone shed some light on why it's different and explain it to me? I even tr ...

angular

Utilizing jQuery for multiple ratings from a single IP address

In the midst of creating a basic web application for rating purposes, I encountered a challenge. The issue at hand is that users can only vote once using their IP address. However, when a user rates one item, they are unable to rate any other items. I need ...

javascriptphpjqueryajaxmysqli

Angular - Best practices for exchanging feedback between sibling components

The title may not be the most descriptive, but I struggled to find a better way to convey my issue. I've encountered a problem multiple times while working with angular. To illustrate, let's consider this scenario: Imagine having a main compone ...

angulartypescriptdesign-patterns

Execute the function upon clicking

When I click on an icon, I want it to blink. This is the code in my typescript file: onBlink() { this.action = true; setTimeout(() => { this.action = false; }, 1000) return this.action }; Here is how the action is declared in my ...

javascriptangular

Turned off jquery on a specific div in order to resolve compatibility problems with Vue.js

Currently, I am working on a Drupal project which includes JQuery in all pages. We have recently introduced Vue.js for creating dynamic components directly in the HTML pages (not for building a single-page application). However, we are facing an issue whe ...

javascripthtmljqueryvue.js

How to display JSON containing nested objects in AngularJS using the ng-repeat directive

Hey everyone, I have this JSON external file that I need help with: { "success":true, "errors":[ ], "objects":[ { "cod":"8211300", "descricao":"Serviços advocatícios" }, // more objects here... ] } In ...

javascriptangularjsjson