Type ‘Observable<{ LOC_NA: any; }>’ is missing the following properties from type ‘Location[]’: length, pop, push, concat, and 25 more

Posted on by

I’m trying to use angular material autocomplete to populate a dropdown when the value changes, but I keep getting the following error.

          Type 'Observable<{ LOC_NA: any; }>' is missing the following properties from type 
          'Location[]': length, pop, push, concat, and 25 more.

The dropdown is supposed to populate data from a json file. I’m using the following doc as a refrence https://material.angular.io/components/autocomplete/examples

Please find the code below:

HTML

           <input type="text" placeholder={{constant.RENTALLOCATION}} matInput 
            formControlName="filteredRentalLocation" [matAutocomplete]="auto" 
            [ngModel]="commonService.selectedRentalLocation">

            <mat-autocomplete #auto="matAutocomplete">
              <mat-option  *ngFor="let option of filteredLocationOptions | async" [value]="option">
                {{option.CCRG_CORP_CD}} {{option.LOC_NA}}
              </mat-option>
            </mat-autocomplete>

TS

          export interface Location {
            CCRG_CORP_CD: any;
            LOC_MNEM_CD: any;
            CITY_NA: any;
            LOC_NA: any;
         }

         export class CreateReservationHomeComponent implements OnInit {
          filteredLocationOptions: Observable<Location[]>;
          
          ngOnInit() {
               this.initCreateResForm();
             //this.createresService.fetchLocationDetails().pipe(map((res:any) =>  res.json()))

         this.filteredLocationOptions = 
               this.createResForm.get('filteredRentalLocation')!.valueChanges
               .pipe(
               startWith(''),
               map(value => this._filterGroup(value)))
          }

          private _filterGroup(value: string): Location[]{
                if(value){
      return this.createresService.fetchLocationDetails().pipe(map(locs => ({LOC_NA: locs.LOC_NA })))
               }
           }

Service TS

     locationDetailsURL = url + 'assets/Locations/aulocs.json';

     fetchLocationDetails(): Observable<Location[]>{
    return this.http.get<Location[]>(this.locationDetailsURL, {withCredentials: true})

JSON data

    [
      {
        "LOC_MNEM_CD":"XYZ", 
        "CCRG_CORP_CD":"B",
        "CITY_NA": "sddfs",
        "LOC_NA": "werwer",
      },
      {
        "LOC_MNEM_CD":"MCD", 
        "CCRG_CORP_CD":"A",
        "CITY_NA": "werwer",
        "LOC_NA": "wwew",
      }
    ]

Source: Angular Material Quesions