Having issues accessing data from my service in Angular

Question

I'm trying to access and use the data from my service and having some issues. I am able to see the data returned just fine in the console from my console.log(data); from the method below:

public getCustomerData() {
      this.Service.getCustomers().subscribe((data) => {
      console.log(data);  
      this.customers = data.value;
      console.log(this.customers);
      var i:number;
      for(i = 0; i < this.customers.length; i++ ){
        if(this.customers[i].CityName == null || this.customers[i].StateName == null || this.customers[i].ZipCode == null || this.customers[i].Address1 == null){
          this.customers[i].Address1 = "";
          this.customers[i].CityName = "San Diego";
          this.customers[i].StateName = "California";
          this.customers[i].ZipCode = "12345";
        }

      }
    }) 
  }

Where I am running into issues is the next line this.customers = data.value;, I am recieving the error Property 'value' does not exist on type 'Customer[]'.

Here is how my data is returned:

Service method:

public getCustomers()
  {
    let url = "https://rss-staging.carefusion.com/api/odata/Facilities";
    const params = new HttpHeaders()
    .set('X-Atlas-SecurityKey', '75162FD1-A4E8-40AB-A62A-823932CEAD1F')

    return this.http.get<Customer[]>(url, {headers: params})
  }

HTML Table:

<div class="row pb-2">
        <div class="col-lg-4">
            <div class="form-group">
                <label for="input1">Name</label>
                <input type="text" placeholder="Customer Name" class="form-control" id="input1"
                    aria-describedby="Text field" name="name" [(ngModel)]="fields.Name"
                    (ngModelChange)="updateFilters()" />
            </div>
        </div>
        <div class="col-lg-5">
            <div class="form-group">
                <label for="input1">Address</label>
                <input type="text" placeholder="Customer Address" class="form-control" id="input1"
                    aria-describedby="Text field" name="address" [(ngModel)]="fields.Address1"
                    (ngModelChange)="updateFilters()" />
            </div>
        </div>
    </div>
    <div class="row pb-2">
        <div class="col-lg-3">
            <div class="form-group">
                <label for="input1">City</label>
                <input type="text" placeholder="City" class="form-control" id="input1" aria-describedby="Text field"
                    name="city" [(ngModel)]="fields.CityName" (ngModelChange)="updateFilters()" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label for="input1">State</label>
                <input type="text" placeholder="State" class="form-control" id="input1" aria-describedby="Text field"
                    name="name" [(ngModel)]="fields.StateName" (ngModelChange)="updateFilters()" />
            </div>

        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label for="input1">Zip Code</label>
                <input type="text" placeholder="123456" class="form-control" id="input1" aria-describedby="Text field"
                    name="name" [(ngModel)]="fields.ZipCode" (ngModelChange)="updateFilters()" />
            </div>
        </div>
    </div>

How can I fix this?

Answer 1

From the code, I can see that you have typecasted the result of the function getCustomers() to customers[]

 return this.http.get<Customer[]>(url, {headers: params})

Basically you are returning an array of customers from the http call.

To return correct value, pipe the results and map

import { map } from 'rxjs/operators'
 return this.http.get<any>(url, {headers: params}).pipe(
  map(data => data.value as Customer[])
)

Answer 2

Your method getCustomers() from the service already return a list of customers, and a list doesn't have a property called value.

You only have to do this, and should works.

this.customers = data;