Typescript: passing arrays as parameter

Question

I am trying to clean my code and make from more functions, one function. But I need to pass two arrays as a parameter and one string. The function is working correctly, but an array, I am passing in the parameter, is not updating in class.

This is my class in typescript, commented code in function onCompanyRenterNameChanged is working, but the new code below the comment, is not working and after the run, it does not update filteredListOfRenters, I am passing as a parameter. It still returns full list, not filtered, but I have no idea why.

export class FilterDialogComponent implements OnInit {
  filteredListOfRenters: Company[];
  filteredListOfStatuses: Status[];
  filteredListOfCars: Car[];

  constructor(...) {
  }

  ngOnInit() {
    this.fillFilteredListsOnInit();
    this.selectValueInControl();
  }

  confirmFilter(data): void {
    data.renterId = this.filterFormGroup.get('renterControl').value;
    data.statusId = this.filterFormGroup.get('statusControl').value;
    data.carId = this.filterFormGroup.get('carControl').value;
    this.dialogRef.close({
      data
    });
  }

  onCompanyRenterNameChanged(value: string) {

    //this.fillFilteredListOfRenterCompanies(value.toLowerCase());
    this.fillFilteredList(this.codeListService.listOfRenters, this.filteredListOfRenters, value.toLowerCase());
  }

  onStatusChanged(value: string) {
    this.fillFilteredListOfStatuses(value.toLowerCase());
  }

  onCarChanged(value: string) {
    this.fillFilteredListOfCars(value.toLowerCase());
  }

  fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      filteredList = codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      })
    }
  }

  fillFilteredListOfRenterCompanies(filter: string) {
    if (this.codeListService.listOfRenters.length !== 0) {
      this.filteredListOfRenters = this.codeListService.listOfRenters.filter((item) => {
        if (item.name !== null)
          return item.name.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListOfStatuses(filter: string) {
    if (this.codeListService.statuses.length !== 0) {
      this.filteredListOfStatuses = this.codeListService.statuses.filter((item) => {
        if (item.name !== null)
          return item.name.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListOfCars(filter: string) {
    if (this.codeListService.cars.length !== 0) {
      this.filteredListOfCars = this.codeListService.cars.filter((item) => {
        let carName = this.codeListService.getNameOfManufacturerById(item.manufacturerId) + " " + item.model + " " + item.ecv;
        if (carName !== null)
          return carName.toLowerCase().startsWith(filter);
      });
    }
  }

  fillFilteredListsOnInit(){
    this.filteredListOfRenters = this.codeListService.listOfRenters;
    this.filteredListOfStatuses = this.codeListService.statuses;
    this.filteredListOfCars = this.codeListService.cars;
  }
}

Javascript uses [pass-by sharing](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language), so setting a new memory reference for the params will never work. Instead, you should return values from your functions, and set the values of your variables where you call the function. — , Feb 04 '19 at 14:03
Please provide a working demo, that should help to track the issue. Use CodePen or any other tool. — Chris Tapay, Feb 04 '19 at 14:32

score 3 · Accepted Answer · answered Feb 04 '19 at 14:33

You're setting filteredList to a new array by assigning Array.filter to it. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter.

What you want to do is return the new results from the function and assign them to the array variable

onCompanyRenterNameChanged(value: string) {
    filteredArray = this.fillFilteredList(this.codeListService.listOfRenters, 
    this.filteredListOfRenters, value.toLowerCase());
}

fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      return codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      })
    }
    else {
        return [];
    }
 }

score 1 · Answer 2 · answered Feb 04 '19 at 13:58

1

You should return result.

update code as below:

  fillFilteredList(codeList: any[], filteredList: any[], filter: string){
    if(codeList.length !== 0){
      filteredList = codeList.filter((item) => {
        if(item.name !== null){
          return item.name.toLowerCase().startsWith(filter);
        }
      });
      return filteredList 
    }
    return []
  }

answered Feb 04 '19 at 13:58

asdf_enel_hak

7,474
5
42
84

I tried it before, but it does not help, the value filteredListOfRenters is still the same – Radoslav Sabo Feb 04 '19 at 14:02

Typescript: passing arrays as parameter

2 Answers2