Error : Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I have a API which returns the below JSON

{
  "error": false,
  "success": true,
  "response": "{\"events\": [\"_campaign.send\", \"_SMS.FAILURE\", \"_SMS.SUCCESS\", \"_email.open\", \"_email.delivered\", \"_email.send\", \"_test.event_stream\"], \"count\": [4, 3, 2, 2, 1, 1, 1]}"
}

in Angular Application I am just printing the response on the console

 this.http.post(environment.getCampaignEvents, {
      "": "",
  }).subscribe(data => {

          this.campaignEvents = data;
          //this.spinner.hide();

          if (this.campaignEvents.success === false) {
              console.log('Get Campaign events = fail');
              this.statusText = this.campaignEvents.msg;
              this.campaignEventsResponseMessage = this.statusText;
              this.toasterService.pop('error', 'Error!', this.campaignEventsResponseMessage);

              this.campaignEventsResponseMessage = this.campaignEventsResponseMessage.msg;
          } else {
              console.log('Get Campaign events = passed');
              this.CampaignList=this.campaignEvents.response;
              this.CampaignList = JSON.parse(this.CampaignList);
              console.log(this.CampaignList);
          }
      }

by this line console.log(this.CampaignList); I am getting the error on the browser The errors are multiplied and keep on throwing the error on the browser.

yes i have defined all the variables used above as 'any' @NicholasK — Santhosh, Sep 09 '19 at 11:35
I am able to print the response also on the browser along with that errors are populating on the browser @NicholasK — Santhosh, Sep 09 '19 at 11:40
I doubt the console.log is causing the errors. Did you try debugging? Maybe on the template you are trying to iterate over an array when you have an object - hence the error. — Nicholas K, Sep 09 '19 at 11:41
the response has an array may be printing that on the console is causing the error but I am not sure that it is the one causing the error @NicholasK — Santhosh, Sep 09 '19 at 11:44
No, it can't be the reason. Check your template (.html) whether you are using this object in a `*ngFor` — Nicholas K, Sep 09 '19 at 11:47
I am not using that variable or iterating on the loop on HTML. @NicholasK — Santhosh, Sep 09 '19 at 11:50
Maybe [this](https://stackoverflow.com/questions/44574249/angular4-error-trying-to-diff-object-object), [this](https://stackoverflow.com/questions/51389341/angular-6-error-trying-to-diff-object-object-only-arrays-and-iterables-are) or [this](https://stackoverflow.com/questions/50885207/angular-6-error-trying-to-diff-object-object-only-arrays-and-iterables-ar) can help. — Nicholas K, Sep 09 '19 at 11:52
How does your html look like? Are you aware, that your CampaignList is not an array? `CampaignList.events` is an array. `CampaignList.count` is another one — MoxxiManagarm, Sep 09 '19 at 12:01

score 1 · Accepted Answer · answered Sep 09 '19 at 11:58

I think the error is not the caused by the console.log. See the error you get: the problem arises in at Object.eval [as updateDirectives](CampaignManagementComponent.html:24)

I suggest you surround the said line (24) with something that prevents it's rendering until the data it requires is present. (probably an *ngFor structural directive where you give a null or on object instead of an array is my guess. (I mean the data you bind is null or object by the time it renders first - try to halt it's rendering until the http call finishes)

Error : Error trying to diff '[object Object]'. Only arrays and iterables are allowed

1 Answers1