Data returning from api call through service to component is an object and seems to need to be an Array for Angular

Question

I have data returned to me that works just fine

working data is

data: Array(16)

Data that is NOT working is like this

data: Menu1Items: Array(5) > 0 { .... } etc

I am using Angular 5, and so service returns data like this

  .map((response: Response) => {
            return response;

Then the component intercepts it and console.log works fine

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

problem is with the data, this screenshot shows the problem, i just don't understand how to fix it with the object vs array?

error message ONLY because of the HTML TEMPLATE

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

HTML Template

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

Image showing that a call that is similar in architecture with html template loop, component , service the working call is the BOTTOM , component notice the different compared to the one called menu that I'm having trouble with?

Answer 1

I think you need to set testing = result.data, and iterate through that.

this.arsSevice.getMenu()
        .subscribe(
            result => {
                this.testing = result.data; 

            })

this will give you access to the array in 'data'

I tried to change the shape of the data, and this worked for me. Hopefully it works for you...

var data={
      menu1Items:[{key:"boo", key2:"hoo"}],
      menu2Items:[{key:"boo2", key2:"hoo2"}]
    }
    var tempData:any[]=[];
    for(var key in data){
      if(data.hasOwnProperty(key)){
        tempData.push(data[key]);
      }
    }
    this.data = tempData;
}

In your template:

<ul *ngFor="let menu of data ">
  <li>
      <ng-container *ngFor="let menuItem of menu">
          {{menuItem.key}} / {{ menuItem.key2}}       
      </ng-container>
  </li>
</ul>

Answer 2

With HttpClient angular automatically parses the reponse into an object. It doesn't know what type of object that is, so it's just a normal object that doesn't know its array properties.

That's because while HttpClient parsed the JSON response into an Object, it doesn't know what shape that object is.

But you can tell angular what type the returning object is so it is cast properly. For example if you get back an array of strings you could do something like this.

return this.http.get<string[]>(apiUrl)

You can read more here , they are describing a similar problem, just with a little different structure.