split values with commas to new lines in HTML

user_13932170 0
Viewed 61

I have values in my HTML like so:

<div>{{countryname}}</div>
<div>{{countryactivity}}</div>
<div>{{countryactivitycount}}</div>

These values are already grouped and separated by a comma, e.g. "Country1, Country1, Country1"

The output looks like this:

Country1, Country1, Country1    
Activity1, Activity1, Activity2    
Count10, Count3, Count4

How can I get it to look like this:

| Country1 | Activity1 | Count10
| Country1 | Activity2 | Count3
| Country1 | Activity1 | Count4

I am new to HTML but can't seem to find an answer to this.

html
3 Answers

You could try making a Table out of it and making them columns, but the easiest approach would be to use JavaScript. For example you can make a function that could replace commas with "|".

user_126527010

It is not possible with only HTML.you to need to write Javascript to convert it.

user_128241910

I hope below solution may help you somewhere for idea.

You can do it in HTML by using .replaceAll('.',' | ')

You have to put static | in the beginning and rest , will be replace by | using replaceAll

<div>| {{countryname.replaceAll('.',' | ')}}</div>
<div>| {{countryactivity.replaceAll('.',' | ')}}</div>
<div>| {{countryactivitycount.replaceAll('.',' | ')}}</div>

It will render data horizontally without filtering/sorting but if you want to rearrange them then you need to use JavaScript.

All the Best!

user_18384510
Related