Is there a way to compare the elements of an array with those of another array containing nested arrays in order to identify matching results?

Every user in our database has specific skills assigned to them. We maintain a list of available skills with unique IDs. The objective is to filter users based on the skill we are interested in, like displaying all Janitors.

We are utilizing Vue.js and implementing this filter as a computed property.

This is what I have so far:

filteredResults() {
  return this.users.filter(user => this.searchedSkills.some(skill => user.skills.some(userSkill => userSkill.id == skill.id)));
}

The issue seems to be with "user.skills.id". I intend to express: user.skills[*].id, but that syntax is invalid.

How do I identify users where one of their skills matches the selected skill's ID from a search dropdown?

Our data structure looks something like this:

Users: [
  user1: {
    name: "Tom",
    id: "12345",
    skills: [
      0: {
        title: "Programmer",
        id: "12345678"
        },
      1: {
        title: "Janitor",
        id: "6788012"
       }
    ]
  },
  user2 {
    name: "Bill",
    id: "u0wb0fu3b",
    skills: [
      0: {
        title: "Landscaper",
        id: "234525"
      },
      1: {
        title: "Janitor",
        id: "6788012"
      }
    ]
  }
]
SearchedSkills: [
  0: {
      title: "Landscaper",
      id: "234525"
  },
]

Answer №1

    const desired_id = SearchedSkills[0].id
    let selected_users = []

    for (const individual of Users) {
        if (individual.id === desired_id)
            selected_users.push(individual)
    }
    console.log(selected_users)

Answer №2

One way to achieve this is by utilizing the Array#some method.

return this.user.filter(user => this.skills.some(
        skill => user.skills.some(({id}) => id === skill.id)));

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

Incorporate seamless integration by using the npm install command

I am currently facing an issue where I need to identify and remove unused dependencies from my package.json file every time I run npm install for my app. Is there a method to automatically include the npm package https://www.npmjs.com/package during the n ...

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

Guide on how to "attach" the routes of an Angular 2 module to a specific location within the routing structure

Let's consider a scenario where the main routing module is defined as follows: // app-routing.module.ts const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'auth', ...

The Server Components render encountered a glitch

Screenshot of the errorI am encountering a strange error only in the production environment. The lack of additional information leads me to believe it may be due to security measures put in place for production. Unfortunately, I have been unable to repli ...

updating a div with URL redirection instead of global redirect

I am facing an issue with redirecting my website flow to the login page when a user clicks any link on the page after the session has expired (either due to timeout or manual logout from another window). In an attempt to solve this, I inserted the followi ...

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

After creating an empty webform page in asp.net, the generated code looks like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Threetier.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org ...

Could someone explain why the window.onload function is not functioning as expected on my other Vue page?

I am facing an issue with my two pages or "views" that have identical JS code. Both pages have a window.onload function where I perform some actions: console.log("loading") window.onload = function() { console.log("loaded") // do stuff } The problem is t ...

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

I’ve encountered a strange error whenever I attempt to inject any dependency TypeError: Cannot set property 'stack' of undefined at NoProviderError.set [as stack] (errors.js:64) at assignAll (zone.js:704) at NoProviderError.ZoneAwareError (zon ...

Prevent the use of the + or - symbols within the body of a regular expression when

function validateNumberInput(){ userInput = document.getElementById('txtNumber').value; var numberPlusMinusRegex = /^[\+?\-?\d]+$/g; if (userInput.match(numberPlusMinusRegex)) { alert('Vali ...

Using Vue to make an API request with a header containing the API

My Unique API Key: 2356yhtujkiw Currently, I am utilizing AXIOS within the VUEJS framework for both get and post requests. According to the API documentation, it is required to include this API key in the header of all requests. Even after attempting to ...

Concealing and revealing the triangular indicator within a bullet diagram using the AngularJS-nvd3-directives library

I am currently utilizing the nvd3-bullet-chart feature from the angularjs-nvd3-directives library in order to present maximum, current, and average data. To exclude the minimum variable from the array for display purposes, I have set its value to 0. In a ...

Position the <a> to the right side of the div

Is there a way to right-align the <a> element, which contains a Button with the text Push Me, within the <div> (<Paper>)? https://codesandbox.io/s/eager-noyce-j356qe This scenario is found in the demo.tsx file. Keep in mind that using ...

Toggle the visibility of a div based on whether or not certain fields have been filled

Having a form with a repeater field... <table class="dokan-table"> <tfoot> <tr> <th colspan="3"> <?php $file = [ 'file' => ...

The TypeScript, NextJS project is encountering an issue where it is unable to read the property 'cwd' due to a TypeError

I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing. Every time I execute yarn dev, I encounter the following error: next-dev.js?53bc:89 Error was not caught TypeError: Cannot re ...

What is the process for specifying a method on a third-party class in TypeScript?

I'm facing a challenge while trying to extend a third-party class in TypeScript. The issue is that I am unable to access any existing methods of the class within my new method. One possible solution could be to redeclare the existing methods in a sep ...

Facing a cross-domain problem that is blocking my ajax request to fetch data from my express endpoint

Looking to retrieve and showcase data from my node/exprss file (app.js) on my index.html. Utilizing an ajax request to localhost:3000/turtles in frontend.js, but running into cross domain obstacles. APP.JS FILE var express = require('express'); ...

Generate a PDF file using a byte array and save it for download

I am working on an AJAX function that calls a server-side method which in turn calls an API and returns a byte array. My goal is to convert this byte array into a PDF file and then download the file. Here is the code I have: AJAX function: function Obtai ...

Iterating using a for loop within different functions

I am facing an issue with this project. I am planning to create a function that calculates from two different `for()` loops. The reason behind having 2 separate functions for calculation is because the data used in the calculations are fetched from differe ...

Vue: The function "priceFilter" is not defined in this context

function sanitizeInput(event) { event.target.value = event.target.value.replace(/[^\d.]/g, ""); event.target.value = event.target.value.replace(/^\./g, ""); event.target.value = event.target.value.replace(/\.{2,}/g, "."); event.targe ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...