I have a service API that pulls data from Django-REST. The returned JSON looks like:

```
[
{
    "manufacturer": "Mfg",
    "model": "Model",
},
{
    "manufacturer": "Mfg2",
    "model": "Model2",
}
]

```

The service API function `getData` returns:

```
return this.httpClient.get(`${this.apiURL}/data/`);

```

Note I am using ListAPIView in Django, and I have verified that the above URL returns the JSON object shown above (though I have to add ?format=json to get the raw data outside of Django's APIView).

I then have an angular component that calls the service API function to convert the observable to an array of objects:

```
export class Data implements OnInit {

private records = Array<object> = [];

...

constructor(private  apiService:  ApiService) {}

ngOnInit() {
  this.getData();
}

public getData() {
 this.apiService.getData().subscribe((data: Array<object>) => {this.records = data});

```

There are no error or warnings, but in the component's HTML file when I try to access the record array it always has a length of 0. For example, the following will print "0" and an empty table.

```
<P> {{ records.length }}</P>
<table>
  <tr>
    <th>Manufacturer</th>
  </tr>
  <tr *ngFor="let record of records">
    <td> {{ record.manufacturer }} </td>
  </tr>
</table>

```

What am I missing?