CODEWITHSUNDEEP
htmlangulartypescriptdata-binding
JCA
JCA

Reputation: 287

How to access specific object in JSON using Angular?

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:

enter image description here

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>

Upvotes: 0

Views: 350

Answers (2)

Salim Chemes
Salim Chemes

Reputation: 297

Consider using | async to access the observable directly in your html

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

and in your component

customers$ : Observable<Customer> = this.getCustomerData();

You can update your getCustomerData with a map operator to return the list of Customers you have inside value property.

Upvotes: 1

Luay AL-Assadi
Luay AL-Assadi

Reputation: 446

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>

Upvotes: 1

Related Questions