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

Question

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

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>

score 1 · Answer 1 · answered Apr 05 '23 at 06:50

You are getting [object][object] because of {{customers}} if you want to print json then change it to {{customers | json}}or just remove this.For your customer details you will need to take care casing so it should be customerId instead of CustomerId something like

 <ul> <li *ngFor="let customer of customers"> 
          {{ customer.customerId }} 
        - {{ customer.customerName }} 
        - {{ customer.address }}
        - {{ customer.countryId }}
        - {{ customer.regionId }}
        - {{ customer.cityId }}
        - {{ customer.email }}
    </li> </ul>

score 0 · Accepted Answer · answered Apr 05 '23 at 06:52

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

i have first letter as a capital in customerModel so it should not be the issue — nado1122, Apr 05 '23 at 07:07
it doesn't matter what you have in your model. What matters is what that data actually is. To find out you can use `Customers: {{customers | json}}` or console.log(this.customers); if the properties are written in lovercase/camelcase you might want to update your customerModel — Zerotwelve, Apr 05 '23 at 07:58

Praveen Srinivasan · Answer 3 · 2023-04-05T06:59:35.460

As per the screenshot you've shared it should be,

<div style="overflow:auto; position:relative;">
    <ul> <li *ngFor="let customer of customers"> 
          {{ customer.customerId }} 
        - {{ customer.customerName }} 
        - {{ customer.address }}
        - {{ customer.countryID }}
        - {{ customer.regionID }}
        - {{ customer.cityID }}
        - {{ customer.email }}
    </li> </ul>
</div>

(e.g) customerId instead of CustomerId, etc,.

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

3 Answers3