Cannot find a differ supporting object '[object Object]

Question

I know this question has been asked before, but please read this completely before you FLAG me... I have tried what the other posts have said, but I cannot stop the error.

Question: I am getting this cursed error,
"Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
and I don't understand what I am doing wrong, so WHAT AM I DOING WRONG?

Explanation: I am reaching out to saleforce to retrieve an array of over 1400+ responses. I have been working with Angular long enough to know how to put the code together, but don't fully understand it. This is the same approach I am using for other request I have sent to salesforce.

My Attempts: So the first SO post I read (Angular: Cannot find a differ supporting object '[object Object]') spoke about the format of the array. The array is coming back in the same format as others (which have no error), and I have tried to even format the response into .json() to be sure. The second post (Cannot find a differ supporting object '[object Object]') said something about using similar names, but I don't believe that applies to me.. and regardless they didn't solve my issue.

THE CODE:

This reaches out the a service that reaches to the salesforce API

  getProviders(){
    this.reqObj.email = this.cus.getCurrentUser();
    this.dss.allProviders(this.reqObj).subscribe(res => {
        this.serviceProvider = res
        console.log("All Providers", res);
    })
  } //End getProviders

How I link to the API

  allProviders(reqObj): Observable<Object>{
    return this.http.get("https://xxxxxx.execute-api.us-east- 
    .amazonaws.com/prod").map(res => res);
  }

iteration in the HTML

<div class="table-row n-txt" *ngFor="let sList of 
  serviceProvider; let i=index" (click)="openProviderAction(sList)">
<div class="table-cell c1">{{sList.Name}}</div>
<div class="table-cell c2" > -- -- </div>
<div class="table-cell c2" > {{sList.county__c}} </div>
<div class="table-cell c3" > {{sList.Phone}}</div>
<div class="table-cell c4" >

Is it possible that the size of the array is causing the error???

can you post what does console.log(JSON.stringiy(this.serviceProvider) shows — Sajeetharan, Jul 27 '18 at 19:07
Your code suggests that `allProviders` returns an `Observable — user184994, Jul 27 '18 at 19:15
@Sajeetharan I will post the response shortly, we are doing some work on the backend with salesforce. — Mason SB, Jul 27 '18 at 19:19
@user184994 Can you explain to me the alternative? observables are what we have used for other API requests and I have never had an issue. — Mason SB, Jul 27 '18 at 19:21
Observables are absolutely fine, it's actually to do with the value that is emitted from the observable. It needs to be emitting an array, not an object — user184994, Jul 27 '18 at 19:22
@Sajeetharan console.log("StackedOHHHver", JSON.stringify(this.serviceProvider)) => CONSOLED => StackedOHHHver {"errorMessage":"body size is too long"} — Mason SB, Jul 27 '18 at 19:23
you should consider providing a JSON atleast first 5 objects. othwerise its very hard help — Sajeetharan, Jul 27 '18 at 19:25
@Sajeetharan What do you mean? "Providing a JSON first 5 objects"???... — Mason SB, Jul 27 '18 at 19:29
StackedOHHHver [{"attributes":{"type":"Account","url":"/services/data/v43.0/sobjects/Account/0014100000S8AL2AAN"},"Name":"10 Grins Orthodontics","Phone":"(509) 324-0817","BillingAddress":{"city":"Spokane","country":null,"geocodeAccuracy":null,"latitude":null,"longitude":null,"postalCode":"99208","state":"WA","street":"6821 N Cntry Hms Blvd Ste 204"},"ABCD__c":false,"Adult__c":"Not Accepting","Apple_Health__c":true,"Delta_Dental_of_WA__c":true,"Dentures__c":"Not Accepting","Geolocation__c":{"latitude":47.7200553,"longitude":-117.4348842},"Provider_Email__c":"georgenauertddsps@yahoo.com",... — Mason SB, Jul 27 '18 at 19:29
The reason for your error with `*ngFor` is because you're getting an errorMessage object back, not an array. You need to investigate why you're getting that error message. — user184994, Jul 27 '18 at 19:32

score 0 · Answer 1 · answered Jul 27 '18 at 19:43

I really hope everyone can empathize with me here. Not sure how i was so careless and didn't think to look, but i declared the object serviceProvider likes so => serviceProvider: any = {} ... This was a simple fix, to serviceProvider: any = []; Thank you guys regardless, i appreciate the information and outside eyes.

Cannot find a differ supporting object '[object Object]

1 Answers1