html - How to access specific object in JSON using Angular?

Question

I'm trying to access certain data from an API and having trouble doing so. Here is the structure of the JSON from the API:

I'm wanting to access Name, StateName & CityName within value to iterate through a table. I'm getting the obvious error "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays", because ngFor isn't iterating through the array. How can I fix my code to iterate through the data to fill my table?

component.ts:

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  customer: any;

 constructor(private Service: CustomerDataService) { }

  ngOnInit(): void {
    this.getCustomerData();
  }

  public getCustomerData() {
    this.Service.getCustomers().subscribe((data)=>{
      console.log(data);
      this.customer = data;
    }) 
  }

}

HTML:

<div class="container">
    <form class="form-inline">
        <div class="input-group mb-2">
            <div class="has-clear">
                <input type="text" name="search" required class="form-control" placeholder="Name" />
                <button class="clear-data" type="reset"><i class="icon-close-bold-sm"></i></button>
            </div>
            <button type="submit" class="btn btn-primary mb-2 ml-3">Search</button>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">State</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let customers of customer">
                    <td scope="row">{{customers.value.Name}}</td>
                    <td scope="row">{{customers.value.StateName}}</td>
                    <td scope="row">{{customers.value.CityName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

The value is an array and not object, so

  public getCustomerData() {
    this.Service.getCustomers().subscribe((data)=>{
      console.log(data);
      this.customer = data.value;
    }) 
  }

and in your template

<tr *ngFor = "let customers of customer">
    <td scope="row">{{customers.Name}}</td>
    <td scope="row">{{customers.StateName}}</td>
    <td scope="row">{{customers.CityName}}</td>
</tr>

Or you can just edit your template

<tr *ngFor = "let customers of customer.value">
    <td scope="row">{{customers.Name}}</td>
    <td scope="row">{{customers.StateName}}</td>
    <td scope="row">{{customers.CityName}}</td>
</tr>