Angular 9: Cannot find a differ supporting object '[object Object]'

Question

I am able to get data from the GET API in the service layer which is printed in console.log(data) of ngOnInit() in list.ts file but I am unable to populate those values in HTML. While trying to populate the data in my HTML file, it throws the following error:

Cannot find a differ supporting object '[object Object]'

Error

Here is my code:

list.ts

constructor(private http: HttpClient, private Service: service) { }
  lists:list[];
 
  ngOnInit() {
    this.Service.getData()
    .subscribe(
      data => {
        this.lists= data;
        console.log(data);
      });
  }

list.service.ts

  getData():Observable<any> {
    return this.httpclient.get("http://servername:8080/api/groups", {withCredentials: true});
   }

export class list{
    $id: string;
    Member: Member[];
    Name: string;

list.html

        <table class="table">
            <tr>
                <th>Member</th>
                <th>Name</th>
            </tr>
    
            <tr *ngFor="let a of lists">
                <td>{{ a.Member}}</td>
                <td>{{ a.Name}}</td>
            </tr>

        </table>

Could you please add the sample response you get as a part of console.log(data) as well here? — Kavitha Karunakaran
– Kavitha Karunakaran, Commented Jun 25, 2020 at 16:44
@KavithaKarunakaran It something like this $id: "1" Name"ABC" Member(38) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} — 廖文俊Edward Liew
– 廖文俊Edward Liew, Commented Jun 25, 2020 at 16:47
sorry, im not sure how to make the result show properly in comments — 廖文俊Edward Liew
– 廖文俊Edward Liew, Commented Jun 25, 2020 at 16:48
@廖文俊EdwardLiew It looks likes Member is an array but list is an object. — Ankit
– Ankit, Commented Jun 25, 2020 at 16:55
not sure, Im also take some reference from internet learn the implementation get from api. Can you take a look on my list.ts whether I get the data in the correct way? — 廖文俊Edward Liew
– 廖文俊Edward Liew, Commented Jun 25, 2020 at 16:58

Rick · Accepted Answer · 2020-06-25 16:57:33Z

1

the error is saying that "data" is an object NOT an array.

either try this:

this.lists= [data];

or figure out why your data is not coming back as an array

answered Jun 25, 2020 at 16:57

Rick

1,88213 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick Over a year ago

just keep in mind, by using that syntax, you are forcing an object into an array of size 1, and you will never have more than 1 element in your array. meaning no reason to even use an array structure in your html.

nima amr · Accepted Answer · 2020-06-25 17:49:00Z

0

I think your data is not array and you should convert your data to array or your data is string and you have to convert to json I take you some solostion for conver sting to json

number 1 :

this.lists= JSON.parse(data);

number 2 : you can map when you get data like this

     this.Service.getData()
        .map(data => data .json())
        .subscribe(
          data => {
            this.lists= data;
            console.log(data);
          });

answered Jun 25, 2020 at 17:49

nima amr

6591 gold badge6 silver badges13 bronze badges

1 Comment

廖文俊Edward Liew Over a year ago

is that i need to use something like JSON.stringify() in service once get from the api?

Collectives™ on Stack Overflow

Angular 9: Cannot find a differ supporting object '[object Object]'

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related