How to define Array Datatype in Angular 5

My model:

export class Customer
{
CustomerId :number
FirstName : string
LastName : string
Email : string
Phone : string
ConfirmPassword:string
Password : string
Address : string//**I want to define address as array.Because I got List of Address from Customer as shown in the image.**

}


Got Array of Address from customer API.How to Achieve this?

It display Like [object Object],[object Object],[object Object] in UI. That error does not change even if you declare it as array. If you are displaying array of objects in template the do it {{Address | json}}
– Amit Chigadani
Jun 29 at 9:40

It display Like [object Object],[object Object],[object Object] in UI

array

{{Address | json}}

It displays all the columns in address table.What if i do if i want to display one particular column?
– Vino Thini
Jun 29 at 9:56

You can loop through address array and display each item using *ngFor
– Amit Chigadani
Jun 29 at 9:58

*ngFor

Check updated answer so as to how to display array of objects and their individual items. You can check that demo aswell.
– Amit Chigadani
Jun 29 at 10:37

4 Answers
4

First you have to create a Address typescript class as follows.

export class Address {
addressId: string;
customerId: string;
firstName: string;
lastName: string;
}


Then define address array atrribute in Customer class.

export class Customer {
customerId :number
firstName : string
lastName : string
email : string
phone : string
confirmPassword:string
password : string
address : Address;


}

Then iterate customers and their adress.

<ul *ngFor="let customer of customers">
<li>


{{customer?.firstName}}
{{customer?.lastName }}

-

{{ adr?.addressId + ', ' + adr?.customerId + ', ' + adr?.firstName}}

</div>
</li>
</ul>

Demo: https://stackblitz.com/edit/angular-1kmqqs

It's Working. Thk u
– Vino Thini
2 days ago

It should be

customers : Customer = ;


EDIT:

You need to have a class for Address as followes,

export class Customer
{
AddressId : string;
... etc
}


and in your Cusomter class,

export class Customer
{
CustomerId :number
FirstName : string
LastName : string
Email : string
Phone : string
ConfirmPassword:string
Password : string
Address : Address

}


It display Like [object Object],[object Object],[object Object] in UI
– Vino Thini
Jun 29 at 9:35

check the updated answer
– Sajeetharan
Jun 29 at 9:38

You can either use Array<Address> or Address, both are same.

Array<Address>

Address

If you do not have an Address model then simply use Array<{}>

Address

Array<{}>

export class Customer
{
CustomerId :number
FirstName : string
LastName : string
Email : string
Phone : string
ConfirmPassword:string
Password : string
Address : Array<Address>

}


EDIT :

To display each item inside an objects (contained in an array), you may simply loop through array of objects


{{addr.addressId}} | {{addr.customerId}} | {{addr.firstName}}





DEMO

But where should the Address | json be given
– Vino Thini
Jun 29 at 11:01

{{Address | json}} is to simply display the entire array without formatting. That is just for debugging purpose. Follow as mentioned in answer to access individual object items in an array.
– Amit Chigadani
Jun 29 at 11:05

{{Address | json}}

See updated demo to get clear idea on that stackblitz.com/edit/angular-dfmxw2
– Amit Chigadani
Jun 29 at 11:12

Its working..Thank You.
– Vino Thini
Jun 29 at 11:20

You have to define something like: export interface Address {...} and then in your Customer class you have to change the address property type from string to Adress

export interface Address {...}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.