Angular 5 getting array issue with data from service to component to template

Question

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 object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

HTML

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

Component

testing: any;

this.arsSevice.getMenu()
     .subscribe(
         result => {
            this.testing = result;
            console.log('menu',result);
      },
      error => {
         console.log('menu error', error);
      }
      )

Service:

getMenu()  {
    return this.http.post(this.menuUrl, JSON.stringify({
        "UserID": 61525,
        "AppID": 15,
        "NavAppID":null,
        "AppGroupID": 116,
        "SelectedCaseID": 0,
        "SelectedRoleID":0            
    }), httpOptions)
        .map((response: Response)=> {
            return response;
        })
}

Image screenshot of the data

Update

I see a data problem

"menu" has data: and it what is HERE and NOT working.

the working one is from a different API call Notice that is has

data: Array(16)

How can I fix my data from object to array ?

Answer 1

The Http service returns a Response object, calling json() on which should give you the data returned by the backend.

Change return response; to return response.json();

Answer 2

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;
      }, {});
      return Object.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"let category of data">
  <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.

Answer 3

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

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