Exploring ways to sort through numerous values within various arrays in Vue.js

My search function seems to be having some issues. It works fine when filtering by city values, but not for the other parameters. If I simplify it to just filter by cityValues or change the && to ||, then it works as expected.

The aim is to search through an array of parameters based on user selections from dropdown menus and display the relevant results.

Just to provide more details, cityValue, zipValue, etc are all arrays. cityValue contains strings, while the rest consist of numbers.

Thank you

   computed: {
            filteredPropertyTypes() {
                return this.propertyTypes.filter(rental => {
                    return this.cityValue.indexOf(rental.city) !== -1 &&
                        this.zipValue.toString().indexOf(rental.zip.toString()) !== -1  &&
                        this.bedroomsValue.toString().indexOf(rental.bedrooms.toString()) !== -1 &&
                        this.bathroomsValue.toString().indexOf(rental.bathrooms.toString()) !== -1 &&
                        rental.rent.toString().includes(this.rentValue.toString());
                })
            }
        },

Answer №1

Based on MDN's documentation,

The indexOf() function identifies the initial index in an array where a specific element is located, returning -1 if the element is not found.

arr.indexOf(searchElement[, fromIndex])

Keep in mind that the use of the indexOf() method is intended for arrays, while your code appears to be utilizing strings as arrays.

To learn more about the indexOf() function, visit this link

UPDATE -- considering the new details, converting cityValue, zipValue, etc., which are originally arrays, into strings by using the toString() method

https://i.sstatic.net/u25Sw.png

Experiment with modifying your code like so:

computed: {
  filteredPropertyTypes() {
    return this.propertyTypes.filter(rental => {
      return this.cityValue.indexOf(rental.city.toString()) !== -1 &&
        this.zipValue.indexOf(rental.zip) !== -1  &&
        this.bedroomsValue.indexOf(rental.bedrooms) !== -1 && this.bathroomsValue.indexOf(rental.bathrooms) !== -1 && rental.rent.includes(this.rentValue);
    })
 }
},

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

Press the button after 60 seconds of inactivity in JavaScript

After a lengthy search and multiple failed attempts with different files, I am in need of the following script: If there is no interaction with a webpage for 1 minute, the script should automatically: - Click on a button. - Repeat the click every 30 secon ...

The error message encountered with React Easy DatePicker is: "Uncaught ReferenceError: process is not defined."

I am attempting to integrate the stylish DatePicker from https://www.npmjs.com/package/sassy-datepicker?activeTab=readme Here is my implementation : import DatePicker from "sassy-datepicker"; function App() { const [date, setDate] = useSta ...

What is the best way to keep an object in an array?

I am faced with the challenge of merging two arrays and converting them into objects stored in one array. const name = ["Amy", "Robert", "Sofie"]; const age = ["21", "28", "25"]; The desired output: const person =[{name: 'Amy', age: '21&apo ...

Are there any reliable charting APIs available that can efficiently handle the lazy-loading of large data sets using Ajax while scrolling or zooming?

Hey there! I need help finding a JavaScript charting API that allows me to query the server using specific bounds on the horizontal and vertical axes in order to retrieve new data points. Just to give you an idea, the dataset I'm working with is incre ...

The element in Vue 3 Unit Test is proving difficult to access

I am currently working on a Vue 3 project that utilizes PrimeVue. Within my template, I have integrated a PrimeVue dialog component as shown below: <template> <div> <Button data-testid="showButton" label="Show" @cli ...

Problem with adding dates to an array using the push method: unexpected values being added

Looking to retrieve dates within a specified range d = 'Tue Oct 2 00:00:00 UTC+0900 2018'; date2 = 'Fri Oct 5 00:00:00 UTC+0900 2018'; var arrTemp = new Array(); //var dispalyHTML = ''; while(d <= date2){ //dis ...

Issue with VueJS: Method not displaying returned data

I am successfully able to retrieve data in the console. However, I am encountering an issue when trying to display this data on the webpage using double curly braces. The rest of the template displays fine without any issues. Template: <template> ...

What causes an array to accumulate duplicate objects when they are added in a loop?

I am currently developing a calendar application using ExpressJS and TypeScript. Within this project, I have implemented a function that manages recurring events and returns an array of events for a specific month upon request. let response: TEventResponse ...

Push-grid interaction through drag-and-drop feature

I'm on a quest to incorporate grid drag-and-drop functionality into my project. While there are numerous frameworks available that offer this feature, one of the most popular options is JQuery UI's sortable library. However, I am specifically lo ...

Struggling with creating dynamic HTML div IDs

I am currently working on developing a feature that generates a new "panel" with dynamic content. However, I have encountered an issue where the newly created div does not receive the assigned id despite my explicit efforts to do so. The id is supposed to ...

How to use Selenium-Webdriver (Java Script) to wait for an element to vanish

driver.wait(until.elementIsNotVisible(By.css(".popup-backdrop fade")), 15000); Is there a way to wait for the ".popup-backdrop fade" overlay to disappear before proceeding with element click? I am working with Selenium-webdriver using JavaScript, not Jav ...

Troubleshooting issues with integrating CDN in a NextJs 13 project

Struggling to add a CDN like Remix Icon to my NextJs13 project. Initially tried adding it by importing the 'head' tag and inserting values into the Head component, but that method is no longer working. There seems to be a new way of doing it now, ...

Show/Hide All Actions in a Vue.js table using Bootstrap styling

In my Vue.js project, I created a bootstrap table to display data loaded from local JSON files. One of the features I added is the ability to Show/Hide details of specific rows, which shows a full message for that row. Now, I'm looking for a way to im ...

Changing the string "2012-04-10T15:57:51.013" into a Date object using JavaScript

Is there a way to transform the format "2012-04-10T15:57:51.013" into a Date javascript object using either Jquery or plain Javascript? ...

Tips for evaluating the performance of webGL clients using three.js

Currently, I am working on a graphic project utilizing three.JS and I am interested in automatically assessing the GPU performance of my client's device. This will help me determine the optimal number of elements to load in the application. Essentiall ...

A guide to finding identical strings in JavaScript

I've got two arrays with the names of premier league players. I'm trying to connect them based on name as the player objects lack unique identifiers. Any tips on how I can perform a string comparison that will correctly match Zlatan Ibrahimovic ...

Uploading Images in VueJs using Laravel

Hey everyone, I'm currently facing a challenge with uploading images from VueJs to a Laravel endpoint. So far, the only method I have found is sending the base64 of the image through the request. The Vue side seems well set up for this task. However, ...

Raycasting displaces object intersections in three.js when the camera is pitched

My latest development involves a raycaster that enables me to select objects within the scene using my mouse. The process is initiated like this: this.raycaster = new THREE.Raycaster() // then in onMouseDown event this.raycaster.setFromCamera(this.mouse, ...

What is the best way to ensure that an input tag within a fieldset tag is required

I am currently working on creating a sign-up page using HTML and JavaScript. However, I am facing an issue with making the input tag required in the HTML code. The following code snippet does not seem to be working as expected: <input type="email" requ ...

Sending data to another page during redirection in Reactjs

I am facing challenges in passing parameters to a new page when redirecting from the current one This is my current page named SingleBox function SingleBox(props){ let history = useHistory(); function moveToSinglePost() { history.push({ ...