Angular 5 Getting Array Issue With Data From Service To Component To Template

Trying to display data in template HTML from a component to service call which calls and returns an API, but I'm getting this error ERROR Error: Cannot find a differ supporting o

Solution 1:

Try this: *ngFor="let item of testing.data.Menu1Items". I do not believe you need the async pipe for this. I would also *ngIf which ever div is containing the *ngFor loop.

Like so:

<div *ngIf="testing"><li *ngFor="let item of testing.data.Menu1Items"><a [routerLink]="[item.url]" ><span>{{item.name}}</span></a></li></div>

Let me know if this can help out with what you are trying to achieve.

EDIT:

So I would suggest formatting your data differently when returning a response to your client, this is how I would format the data before its returned:

[
  {
    actionType:'',
    displayName:'MyiCIS',
    displayOrder:'1',
    displayOrder1:null,
    groupName:'Data Entry',
    id:420,
    url:'MyiCIS.asp',
    type:'Menu1Items'
  },
  {
    actionType:'',
    displayName:'MyiCIS',
    displayOrder:'1',
    displayOrder1:null,
    groupName:'Data Entry',
    id:420,
    url:'MyiCIS.asp',
    type:'Menu1Items'
  },
  {
    actionType:'',
    displayName:'MyiCIS',
    displayOrder:'1',
    displayOrder1:null,
    groupName:'Data Entry',
    id:420,
    url:'MyiCIS.asp',
    type:'Menu2Items'
  },
  {
    actionType:'',
    displayName:'MyiCIS',
    displayOrder:'1',
    displayOrder1:null,
    groupName:'Data Entry',
    id:420,
    url:'MyiCIS.asp',
    type:'Menu2Items'
  }
];

Then if you want to group the data by whichever field you choose, run the array through this method and it will spit out the data grouped into separate arrays:

transformArray(array: Array<any>, field) {
    if (array) {
      const groupedObj = array.reduce((prev, cur) => {
        if (!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      returnObject.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    }
    return [];
  }

Here is a console log of the data before its transformed and then after its been transformed:

So the first array is just what should be returned from the server, and the second array is after the transformation.

Then to loop through this in your markup, here is the structure of the *ngFor:

<div *ngFor"letcategoryofdata"><div>{{ category.key }}</div><div *ngFor="let item of category.value">
    {{ value.name }}
  </div></div>

I hope this can be of help, I think your first step should be formatting that array before its returned to the client as an array of objects not grouped by a key, and then manipulate the data once it hits your client.

Solution 2:

That's because you're trying to iterate through data object. Try:

<li *ngFor="let item of testing.Menu1Items">