Search code examples
javascriptangularangular-materialangular13

Getting [object Object],[object Object] in angular view

I am calling an API that is returning the following object

public sealed class ApiResponseModel<T>
{
    //It Determines either the request has been processed successfully or not
    public bool IsSuccess { get; set; }

    //It will contains the return code of http request
    public int? ReturnCode { get; set; }

    //It will elaborate the return code reason
    public string? ReturnDescription { get; set; }

    //It contains the http request data
    public T? Result { get; set; }
}

This is my service code

getCustomerList(userId: string, systemIntegratorId: number):Observable<any>
    { 
      // console.table(this.http.get(endpoint +'GetCustomersList?' + 'userId=' + userId + '&systemIntegratorId=' + systemIntegratorId, httpOptions));
      return this.http.get(endpoint +'GetCustomersList?' + 'userId=' + userId + '&systemIntegratorId=' + systemIntegratorId, httpOptions);
    }

This is the component code

export class CustomerComponent implements OnInit {
  //customerListResponse: ApiResponse={}; 
  customers:customerModel[]=[];//Had to initialise as was giving error otherwise
  constructor(private customerService: CustomerServiceService){}
  ngOnInit(): void {
    this.customerService.getCustomerList('e5fc6d55-c68c-4471-8aef-e43cc011c233', 2).
    subscribe({
      next: (data) => {
        var _data = data as ApiResponse; 
        this.customers = _data.result;
        console.table(this.customers); 
      }});
  }
}

Data is showing in the console enter image description here

But getting [object Object],[object Object], in html. here is the html code

<div style="overflow:auto; position:relative;">
  {{customers}}
    <ul> <li *ngFor="let customer of customers"> 
          {{ customer.CustomerId }} 
        - {{ customer.CustomerName }} 
        - {{ customer.Address }}
        - {{ customer.CountryID }}
        - {{ customer.RegionID }}
        - {{ customer.CityID }}
        - {{ customer.Email }}
    </li> </ul>

</div>
Solution

  • first of all, return Observable instead of Observable. Second, never use var, use const or let instead; lastly, to solve your problem, you can use the json pipe to see what you actually get:

    <div style="overflow:auto; position:relative;">
  Customers: {{customers | json}}
    <ul> <li *ngFor="let customer of customers"> 
       Id: {{ customer.CustomerId | json }} <br>
       Name: {{ customer.CustomerName | json }} <br>
       Address: {{ customer.Address | json }} <br>
       CountryID: {{ customer.CountryID | json }} <br>
       RegionID: {{ customer.RegionID | json }} <br>
       CityID: {{ customer.CityID | json }} <br>
       Email: {{ customer.Email | json }}
    </li> </ul>
</div>

    I guess the customer itself should be correct and you won't need the JSON pipe... Probably it's because you are Capitalizing the first letter.

    Then you will see whats wrong/correct and you can change your code