How to print an array in comma separated string in angular html

Question

I have to display a parse an array inside a json in HTML:

 <p class="personaType">{{cardData.names}}</p>

where names is

names: Array(5) 0:"Person" 1:"Artist" 2:"Performing Artist" 3:"Production Artist" 4:"Visual Artist" 5:"Intermedia Artist"

I want to display names as:

Person, Artist, Performing Artist, Production Artist

Right now it is displaying as (without space):

Person,Artist,Performing Artist,Production Artist

Is there any inbuilt pipe available in angular which can be used to display such data?

bugs · Accepted Answer · 2018-05-23 11:31:55Z

94

You can use Array.prototype.join (notice the white space after the comma)

<p class="personaType">{{cardData.names.join(', ')}}</p>

This will print all the elements in the array, separated by a comma and a white space.

answered May 23, 2018 at 11:31

bugs

15.4k6 gold badges53 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

bugs Over a year ago

Glad it helped. Note that this is not specific to Angular, is just a standard JS array method

Always_a_learner Over a year ago

Yes I can understand that. but it is not a hack? right? it is a right way to do it?

bugs Over a year ago

@Simer it's definitely not a hack

Troy Weber Over a year ago

It's not a hack, but see the answer below for how you should do it in angular to be more performant.

Bobby_Cheh Over a year ago

This answer an Angular "bad practice" due to running a function directly inside the template html and a pipe should be used instead. See the answer below

|

Troy Weber · Accepted Answer · 2023-01-06 18:48:59Z

66

To minimize the load on your application, you might also consider creating a pipe.

The transform function would look like this:

@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(input:Array<any>, sep = ','): string {
    return input.join(sep);
  }
}

It could look something like this, as far as usage:

<p>{{ cardData.names|join:', ' }}</p>

edited Jan 6, 2023 at 18:48

answered Dec 11, 2019 at 19:41

Troy Weber

1,10510 silver badges10 bronze badges

4 Comments

crush Over a year ago

Should be the accepted answer to be honest, though the example could be more fleshed out.

Troy Weber Over a year ago

@crush I put the entire pipe in there. Let me know if you had something else in mind.

Yosvel Quintero Over a year ago

Good answer! I would also add pure: true

Troy Weber Over a year ago

@YosvelQuintero You could do that. According to the documentation, they are pure by default. That said, sometimes it is better to be more explicit, depending on the needs of the codebase.

Collectives™ on Stack Overflow

How to print an array in comma separated string in angular html

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related