Commas issue in retrieving address details in an Ionic angular application

24 views
Skip to first unread message

Saif

unread,
Oct 12, 2020, 1:23:22 AM10/12/20
to Angular and AngularJS discussion

HI

Im trying to output the address details of the user from backend and to display on html page in an ionic angular project

Here the address details has three fields

Address line1 (mandatory), Address line2 and Address line 3 (non mandatory)

when i try to out these address details in line separated by commas. iam getting extra commas when addressline 2 and 3 are not filled.

i want the commas to shown only if the next two fields are filled else dont want to show

Below is my code.

TS File: 

  getAddress() {

    this.apiService.getAddress().then(

      res => {

        this.primaryAddrArray = [this.primaryAddress.addressLine1, this.primaryAddress.addressLine2, this.primaryAddress.addressLine3];

     }

}

HTML page: 

<h1> Address: </h1>

<p *ngFor="let addr of primaryAddrArray; let i=index">{{addr}}, </p> 

because of the comma used after {{addr}} iam getting commas after each address line.

also tried like this

<h1> Address: </h1>

<p *ngFor="let addr of primaryAddrArray; let i=index">{{addr} {{primaryAddrArray = null ?  ' ' : ','}} </p>

getting output as  

Address:

9th Avenue block,,,

I dont want extra commas if the remaining two address fields are not filled. please assist me on this. 

Thank you


 

bastien lemaire

unread,
Oct 12, 2020, 2:18:07 AM10/12/20
to ang...@googlegroups.com
Hi Saif,

You need to remove empty values from the array:
Something like this should do the trick. `array.filter(value => value && value.length)`.
However you will always have 1 trailing comma because of your html: `{{addr}},`

Bastien Lemaire


--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/d382b177-7b47-4a6f-8984-1ccb8394c8abn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages