After fetching JSON data from the endpoint, I am attempting to update an array but not seeing the expected results on the frontend.
export class LocationSectionComponent implements OnInit{
myControl = new FormControl();
options : string[] = ['0089/PITT', '0085/CALI', '0090/MASS'];
filteredOptions: Observable<string[]>;
constructor(private http: HttpClient) {}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
this.fetchData();
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(value));
}
private fetchData ()
{
this.http.get('http://localhost:9090/api/v1/facility/1')
.subscribe(responseData => {
const facilityOrigin = responseData.facilityNumber +"/"+ responseData.name;
this.options.push(facilityOrigin);
console.log(this.options);
});
}
When calling the fetchData() method and performing a push operation, I get an updated array like this:
(4) ["0089/PITT", "0085/CALI", "0090/MASS", "89/PITT"]
0: "0089/PITT"
1: "0085/CALI"
2: "0090/MASS"
3: "89/PITT"
length: 4
__proto__: Array(0)
However, on the frontend, only 3 options are visible: ['0089/PITT', '0085/CALI', '0090/MASS']. How can I resolve this issue? Is it a scope problem or something else?