The elements that meet the first condition are the only ones displayed by my filter

I'm having trouble figuring out the best way to describe this scenario: I have a list of bases, each with a list of connectors (which could be one or more). I created a filter to sort my bases by their connectors, and here's what my method looks like:

calcBaseList: function() {
  let tmp = [];
  if (this.filterConnector.length > 0) {
    this.listBase.forEach((base) => {
      if (this.filterConnector.includes(base.connectors[0].standard)) {
        tmp.push(base);
      }
    });
  } else {
    tmp = this.listBase;
  }
  this.filtredBase = tmp;
},

The issue arises when I try to filter for "connector_base_3" and I have a base that includes "connector_base_3" in its connectors but not as the first one on the list. This base doesn't show up in my filtered list. I attempted changing base.connectors[0].standard to base.connectors.standard or base.connectors, but it doesn't apply the filter correctly.

I apologize if my explanation is a bit unclear. Does anyone have any suggestions on how to resolve this problem?

javascriptvue.js

Answer №1

It's important to thoroughly inspect all connectors within your filter, not just the initial one!

updateBaseList() 
{
  let temporaryList = [];
  if (this.filterConnector.length > 0) 
  {
    temporaryList = this.baseList.filter((base) => base.connectors.some(connector => this.filterConnector.includes(connector.standard)));
  } 
  else 
  {
    temporaryList = this.baseList;
  }
  this.filteredBases = temporaryList;
},

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

Rails MultiSelect Array not converting to String Correctly

I am having trouble converting my array to a string properly. I am using rails multiselect: Views: <%= f.select :foo, [ ['a'], ['b'], ['c'] ], {:prompt => "Select an alpha"}, {:multiple => true} %> Controller: ...

javascriptruby-on-railsruby-on-rails-4reactjs

Sending asynchronous requests to handle data within various functions based on different links

I'm currently facing a major roadblock when it comes to resolving my issues with callbacks. I've gone through resources like How to return value from an asynchronous callback function? and How to return the response from an Ajax call?, among seve ...

javascriptajaxcallback

Receiving an error stating that .startsWith() is not a function in react native

I'm having trouble searching for items using a search bar. The original items are in 'prod', but I keep encountering errors such as 'startsWith() is not a function' and sometimes '.toLowerCase() is not a function'. const ...

javascriptarraysreactjsreact-native

Controllers in Laravel are not detecting the public function

Recently, I obtained a Laravel/Vue.js project from Bitbucket for the company I am currently collaborating with. Setting it up on my computer seemed like a routine task since I have worked on similar projects in the past. However, this time around, I encoun ...

phplaravelvue.jsapachegit-clone

Develop a built-in Button for Liking posts

Currently, I am encountering an issue with the JavaScript SDK where I am unable to create a built-in Like button. After researching, I came across this helpful resource: https://developers.facebook.com/docs/opengraph/actions/builtin/likes/ The solution pr ...

phpjavascriptfacebookfacebook-like

Tips for troubleshooting a 422 (Unprocessable Entity) Error Response in a Vue/Laravel project

I'm currently struggling to connect the frontend of my simple Vue 3 and Laravel 8 contact form project with the backend. No matter what data values I pass, whether it's null or not, I keep getting a 422 (Unprocessable Entity) response without any ...

phplaravelvue.jshttpresponsevuejs3

Utilize JavaScript to trigger a div pop-up directly beneath the input field

Here is the input box code: <input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> Along with the pop-up div code: <div id='div_change_qty' name='div_change_qty&ap ...

javascriptjqueryhtmlcss

"Error: The req.body object in Express.js is not defined

edit:hey everyone, I'm completely new to this. Here's the html form that I used. Should I add anything else to this question? <form action="/pesquisar" method="post"> <input type="text" id="cO" ...

javascriptnode.jsexpressbody-parser

The AJAX request seems to be malfunctioning despite the fact that both the PHP and JS files function correctly independently

I have set up an AJAX call and tested the JS file by alerting out the POST values being sent along with the data string. Everything seems fine at that point. I then passed these values to the PHP file where they are required, making sure to keep it simple ...

phpjavascriptjquerymysqlajax

Encountering an issue while trying to set up a fresh react application

Issue encountered when trying to start a new React project ...

javascriptreactjsreact-native

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

I'm currently working on extracting the id of a Checkbox object in my JSX code. Here's how I've set it up: <div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> ...

javascriptreactjsmaterial-ui

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

Why is it that a JSX element can take a method with parentheses or without as its child?

Why is it that when I attempt to pass a method without parentheses into a React component as a child of one of the JSX elements, an error appears in the console? However, simply adding parentheses resolves the issue. What's the deal? For example: ran ...

javascriptreactjsjsx

I'm struggling to update a value in my view with Angularjs and Socket.io. It seems impossible to

In order to master AngularJS and NodeJS, I am embarking on creating a chatroom project. Everything seems to be functioning smoothly with Angular controllers and sending data to my NodeJS server using socket.io. However, I have encountered a problem: When m ...

javascriptangularjsnode.jssocket.io

"Encountering a Problem with Assigning Variables in Vue

My issue revolves around the integration of VueJs, Vue-Resource, and Laravel. The problem occurs when attempting to assign a local variable to response data received from an AJAX request using vue-resource. Code Javascript <script> flags_ ...

javascriptlaravelvue.jsvue-resource

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

What is the best way to properly format letters with accents (such as French letters)?

I have encountered a challenge where I created a PHP file to display French text and then utilized this text in an AJAX file (specifically the responseText). The issue arises when trying to show the French responseText in an alert using JavaScript, as ac ...

phpjavascriptajax

Ensure to use e.preventDefault() method when handling form submissions

Check out this code snippet: <form> <input type="text" name="keyword" value="keyword"> <input type="submit" value="Search"> </form> I'm seeking assistance with implementing jQuery to prevent the default action of the submit b ...

javascriptjquery

There seems to be an issue with Bookshelfjs and bcrypt hashPassword - it is functioning properly during the create

When using bcrypt to hash passwords in bookshelfjs, I encountered an issue where the password was not being hashed when attempting to update it. Here is the code snippet: model.js var Bookshelf = require('../../db').bookshelf; var bcrypt = requ ...

javascriptnode.jsexpressbcryptbookshelf.js

Setting the width of an image within an iframe: A step-by-step guide

Is there a way to adjust the width of an image within an iframe? Typically, if an image with high resolution is placed inside an iframe, the iframe becomes scrollable by default. ...

javascriptjqueryhtmlcss