1

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?

enter image description here

  • How can your data possibly change? You must be modifying it somewhere, please provide all the code needed to reproduce the issue, or better yet, create a demo that showcases the issue. – AT82 Dec 05 '17 at 06:49
  • He seems to be showing an example (I think ) of 1 that works (a different call I assume) to one that doesn't work - Certainly not explained very well, but I stumbled across this and the answer selected did help me. – John Baxter Dec 06 '17 at 06:10

2 Answers2

2

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>
Farasi78
  • 981
  • 10
  • 18
  • No, I did that, no luck . The data is different notice the screenshot. the working service /component has the data in an array , but look at the data that i'm getting back in the menu ... –  Dec 05 '17 at 01:29
  • Is GetMenu is a different call from the 'working array' or is it the same one? Why does one have a status of 'fail' and the other success? The Menu Items are also arrays of objects, so you would need to iterate through each menu array as well. Have you tried with two loops? – Farasi78 Dec 05 '17 at 01:38
  • @Farasi78 doing a google search and stumbled here. I have a similar problem as that guy asking the question. I have an array of objects that I need to iterate over. I am not in front of my code at the moment, I need to get back to my computer with my code and post a question I guess. Wondering of an example from that angular code on how to really loop over each array? can you show an example? – John Baxter Dec 05 '17 at 07:06
  • this worked for me. I do something like `customers : any;` then customers = result.data["customers"] – John Baxter Dec 06 '17 at 06:12
0

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.

Benedikt Schmidt
  • 2,178
  • 16
  • 20