CODEWITHSUNDEEP
jsontypescriptangular6
Empty_Soul
Empty_Soul

Reputation: 809

Unable to display interface value of array type

I have an component called demo, In which i am displaying some data from API.

html

   <div  *ngFor="let  user of users">
      <p>Name: {{user?.name}}</p
      <p>Phone: {{user?.addresses}}</p
   </div>

ts

import { Component,  Input } from '@angular/core';
import {  User} from '../app-models';

@Component({
 selector: 'wsd-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css'],
})

export class DemoComponent  {
 @Input()
 public users: User;
}

app-models.ts (declared interface (User) in this file)

 export interface User{
    name: string;
    addresses:  IAddressElement[];
 }

 export interface IAddressElement {
     type:            string;
     city:            string;
     countryOrRegion: string;
     postalCode:      string;
     state:           string;
   }

Json

  "name": "Jhon",
   "addresses": [
    {
        "address": {
            "type": "Home",
            "city": "Loretto",
            "countryOrRegion": "United States",
            "postalCode": "00000",
            "state": "Minnesota",
        }
      },
      {
        "address": {
            "type": "Business",
            "city": "Norwalk",
            "countryOrRegion": "United States",
            "postalCode": "1111",
            "state": "Connecticut",
        }
      },
      {
        "address": {
            "type": "Business",
            "city": "Huntington",
            "countryOrRegion": "United States",
            "postalCode": "33333",
            "state": "West Virginia",
        }
     }
   ],

I am facing an issue. In the html the name is displaying fine. But while displaying address(i,e addresses). It is displaying as

[object Object] [object Object].

I want display all the address, I tried using *ngFor but didn't got exact result..:)

Upvotes: 0

Views: 33

Answers (1)

Praveen
Praveen

Reputation: 2419

You are printing the addresses array as it is. You have to loop through them and print what you need. I'm not an Angular guy though. 

<div *ngFor="let user of users">
  <p>Name: {{user?.name}}</p>
  <div *ngFor="let a of user?.addresses">
    <p>State: {{a.address.state}}</p>
  </div>
</div>

Upvotes: 2

Related Questions