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

Answer 1

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

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

Answer 2

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 3

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.