CODEWITHSUNDEEP
angularangular9
廖文俊Edward Liew
廖文俊Edward Liew

Reputation: 15

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

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

Sample IMage

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>

Upvotes: 1

Views: 92

Answers (2)

nima amr
nima amr

Reputation: 661

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);
          });

Upvotes: 0

Rick
Rick

Reputation: 1870

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

Upvotes: 1

Related Questions