ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. Getting this in get API

178 views Asked by At

This Error is coming when I am trying to show the data from an get api on html template using ngfor in angular

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

This is my bankComponent.ts file

 
  getSearchBankAPI(postData : Create , postForm : NgForm){
    this._newApiService.getSearchBank(
      postData.address,
       postData.bankId,
      postData.bankName,
      postData.branch,
      postData.ifscCode,
       postData.passBookNo
      
      )
     
   console.log("Search Customer API Called!!");
   postForm.reset();
  
  localStorage.setItem("bankIFSCvalue",this.bankvalue);
  console.log(localStorage.getItem("bankIFSCvalue"))

   this.getBankById();
    }


    public getBankById(){
  return this.http.get('http://localhost:9900/api/v1/bank/' + localStorage.getItem("BankId"))
  .subscribe((responseData)=>
  {
    
     this.response = JSON.parse(JSON.stringify(responseData));
    console.log("Bank name is :" + this.response.body.bankName)
    console.log(this.response)
    
    
    });  
      }
    }

Here I am calling the getBankById() get API from getSearchBankAPI() method and I want to display the result of getBankId() get API on the template .

This is my template code

                            <thead>
                            <tr>
                              <th scope="col">Bank Name</th>
                              <th scope="col">Branch</th>
                              <th scope="col">IFSCCode</th>
                            </tr>
                            <tr *ngFor="let e of response">
                                <th scope="col">{{e.bankName}}</th>
                                <th scope="col">{{e.branch}}</th>
                                <th scope="col">{{e.ifscCode}}</th>
                            </tr>
                            
                            </thead>
                        
                          </table>




1

There are 1 answers

0
Gerald LeRoy On

Is the answer to use...

<tr *ngFor="let e of response.body">

instead of

<tr *ngFor="let e of response">

?