How to pass a property in an angular components as an argument to a private function

Question

I've got an angular component that calls via http to an API to populate a select list. The property on this component looks like this:

searchKeys: SelectItem[];

And the function that gets the data onInit that works just fine:

private GetSearchKeyList() {
    this._httpService.get('/api/List/Key')
        .map(result => result.json())
        .subscribe(list => {
            this.searchKeys = list.map(item => { 
                return { label: item.text, value: item.value };
              });
        });
}

Now, I'd like to turn it into something more generic that I can use for other properties, so something like this:

this.LoadListValues('/api/List/Key', this.searchKeys);

private LoadListValues(apiEndpoint: string, projectTo: SelectItem[]) {
    this._httpService.get(apiEndpoint)
    .map(result => result.json())
    .subscribe(list => {
        projectTo = list.map(item => { 
            return { label: item.text, value: item.value };
          });
    });
}

But this doesn't seem to work, where I'm passing 'projectTo' as a reference to the property on my component, it's never populated with values.

What am I missing here?

It seems that you are passing `projectTo` as a reference. `map` method creates a new array, which basically destroys the reference for `projectTo` outside this function. Try using foreach like `list.foreach(item => projectTo.push({label: item.text, value: item.value});)` — Emin Laletovic, Oct 02 '17 at 15:50

Suraj Rao · Accepted Answer · 2017-10-02T16:56:01.383

According to this answer, Javascript does call by sharing. So the parameter passed is unaffected in your case since you are changing the value of it.

Secondly, observables are asynchronous and so setting of the value within subscribe method may occur after you try to access the data. So something like the following which was suggested in the comments is also likely to fail.

private LoadListValues(apiEndpoint: string, projectTo: SelectItem[]) {
    this._httpService.get(apiEndpoint)
    .map(result => result.json())
    .subscribe(list => {
        list.map(item => { 
            projectTo.push({ label: item.text, value: item.value });
          });
    });
}

One way is to return everything as an Observable<any[]> and later subscribe from the common private function.

private LoadListValues(apiEndpoint: string):Observable<any[]>{
   return this._httpService.get(apiEndpoint)
    .map(result => result.json())
    .map(list => list.map(item => return { label: item.text, value: item.value });

}

This would allow you to manipulate the array in a generic way without passing any array parameter.

How to pass a property in an angular components as an argument to a private function

1 Answers1