Sift through JavaScript problems

Question

Sift through JavaScript problems

My goal is to implement a filtering function on my input that will display a different result. However, I have encountered an issue where the this.data.stationInfo.stations array is being changed, as shown in the console.log output. According to the Mozilla docs, the filter should create a new array instead of modifying the existing one. I suspect that the problem lies with how I am using this. Does anyone have any ideas on how to resolve this?

onTextChanged: function () {
            let copy = this.data.stationInfo.stations;
            console.log("this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
            copy  = copy
                .filter(el => {
                    return el.eng站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.traWebsiteCode.startsWith(this.data.searchBar.search.toLowerCase())
                });
            this.data.resultDetails.stations = copy;
            console.log("copy.length", copy.length);
            console.log("after copy.length this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
        },

console.log output:

JS: 'this.data.stationInfo.stations.length' 239

JS: 'copy.length' 4

JS: 'after copy.length this.data.stationInfo.stations.length' 4

JS: 'this.data.stationInfo.stations.length' 4

JS: 'copy.length' 0

JS: 'after copy.length this.data.stationInfo.stations.length' 0

JS: 'this.data.stationInfo.stations.length' 0

JS: 'copy.length' 0

JS: 'after copy.length this.data.stationInfo.stations.length' 0

JS: 'this.data.stationInfo.stations.length' 0

JS: 'copy.length' 0

JS: 'after copy.length this.data.stationInfo.stations.length' 0

UPDATE:

Check out the NativeScript PlayGround example here:

javascript vue.js this nativescript-vue

Answer 1

Answer №1

It is not recommended to create references. By setting a reference to your original array, any changes made to the copy will also reflect on the original array.

onTextChanged: function () {
            console.log("this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
            let newArray  = this.data.stationInfo.stations
                .filter(el => {
                    return el.eng站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.traWebsiteCode.startsWith(this.data.searchBar.search.toLowerCase())
                });
            this.data.resultDetails.stations = newArray;
            console.log("copy.length", copy.length);
            console.log("after copy.length this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
        }

Instead, I recommend optimizing your code by performing all necessary actions in one place. You can iterate over the array and directly exclude unwanted stations. Here's an example:

onTextChanged: function () {
const stations = this.data.stationInfo.stations;
function doSearch(el,str) {
    return 
        el.eng站名.toLowerCase().startsWith(str) ||
        el.站名.toLowerCase().startsWith(str) ||
        el.traWebsiteCode.startsWith(str);
}

for(let j=0; j < stations.length; j++){
    if(!doSearch(stations[j], this.data.searchBar.search.toLowerCase())){
        stations.splice(j, 1);
    }
}

console.log(stations);
}

Answer 2

It is not recommended to create references. By setting a reference to your original array, any changes made to the copy will also reflect on the original array.

onTextChanged: function () {
            console.log("this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
            let newArray  = this.data.stationInfo.stations
                .filter(el => {
                    return el.eng站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.traWebsiteCode.startsWith(this.data.searchBar.search.toLowerCase())
                });
            this.data.resultDetails.stations = newArray;
            console.log("copy.length", copy.length);
            console.log("after copy.length this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
        }

Instead, I recommend optimizing your code by performing all necessary actions in one place. You can iterate over the array and directly exclude unwanted stations. Here's an example:

onTextChanged: function () {
const stations = this.data.stationInfo.stations;
function doSearch(el,str) {
    return 
        el.eng站名.toLowerCase().startsWith(str) ||
        el.站名.toLowerCase().startsWith(str) ||
        el.traWebsiteCode.startsWith(str);
}

for(let j=0; j < stations.length; j++){
    if(!doSearch(stations[j], this.data.searchBar.search.toLowerCase())){
        stations.splice(j, 1);
    }
}

console.log(stations);
}

Sift through JavaScript problems

Answer №1

Similar questions

The best practices for managing item spacing in React or React Native

Rendering a Component Inside Another Component

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

The instance is referencing "firstName" during render, but it has not been defined as a property or method

The element.find() function in Angular struggles to locate input elements nested within other elements

Experiencing a failure in defining the factory

Are there any alternative methods to define a constructor function in TypeScript that do not involve utilizing classes? Upon researching on this subject, it appears that all sources suggest using classes

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

Can you show me how to use jQuery/JS to split this string into two separate arrays?

Sharing information among v-for divisions - Vue.js

"Enhance Your Website with Javascript: Combining and Incorpor

Unable to perform queries from a separate file as connection.query function is not recognized

Ways to rotate SVG images exclusively upon clicking

Rendering JSON Data in JavaScript using Table Pagination

Is it possible to refresh a tree without having to reload the entire webpage?

Provide input to npm when running "my command" and utilize that input within my functions

Create Joi Schema based on TypeScript types/interfaces

Button Triggering Javascript

In React, the constant always has a default value of "Object : Default"

Switching the active className in React and Next.js based on selection status