Question 51516 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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,.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search