Displaying comma separated string in Angular 6

Question

I am trying to loop through a comma separated string in Angular 6.

public  getCategory(){
    this.Jarwis.getCategorys().subscribe((data:  Array<object>) => {
    this.categorys  =  data;
    console.log(this.categorys);
});

This is my function which have a console log as

(3) [{…}, {…}, {…}, {…}, {…}, {…}]
 0: {id: 4, category_name: "Agriculture", sub_category_names: "Other Agriculture,Vineyards and Wineries,Greenhouses,Tree Farms and Orchards"}
 1: {id: 5, category_name: "Automotive and Boat", sub_category_names: "Auto Repair and Service Shops,Car Dealerships,Marine/Boat Service and Dealers,Junk and Salvage Yards"}
 2: {id: 13, category_name: "Beauty and Personal care", sub_category_names: "Massage,Tanning Salons,Spas,Hair Salons and Barber Shops"}

I can display category name in view page with the help of

<li *ngFor='let category of categorys'>
  <div>{{ category.category_name }}</div>
</li>

But how can I display sub_category_names in different divs just like this

<div> subcategory_name1 </div>
<div> subcategory_name2 </div>

Please help

You may need to change your sub_category_names into an array — Augustin R
– Augustin R, Commented Oct 5, 2018 at 9:26

Andrei Tătar · Accepted Answer · 2018-10-05 12:22:20Z

3

You can use a custom pipe to split the array:

@Pipe({
  name: 'splitComma'
})
export class SplitCommaStringPipe implements PipeTransform {
  transform(val:string):string[] {
    return val.split(',');
  }
}

and use it like:

<div *ngFor="let subcategory of category.sub_category_names|splitComma"> 
  {{subcategory}}
</div>

edited Oct 5, 2018 at 12:22

answered Oct 5, 2018 at 9:28

Andrei Tătar

8,34523 silver badges41 bronze badges

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

Comments

Sandip Jaiswal · Accepted Answer · 2018-10-05 09:31:35Z

2

Use following code in your html:

<li *ngFor='let category of categorys'>
  <div>{{ category.category_name }}</div>
  <div *ngFor="let subCategory of category.sub_category_names?.split(',')">
     {{ subCategory }}
  </div>
</li>

answered Oct 5, 2018 at 9:31

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

3 Comments

Andrei Tătar Over a year ago

I wouldn't recommend doing this. Especially with more complex functions... It will be executed on each change detection cycle. The pipe solution is more efficient. (blog.appverse.io/…)

Sandip Jaiswal Over a year ago

@Andrew change detection will fire only when categorys property will change. In this case change detection will never fire because there is no any event that going to change categorys property. Again if categorys property will change then obviously it will re render and pipe or whatever used here will fire. I'm working on ChangeDetection from Angular 2 and this code will valid in every case and will not cause any issue.

Andrei Tătar Over a year ago

you can see waht I mean here: stackblitz.com/edit/… Open the console and see how many times split is called. Also click the button (nothing changes) and see what happens! The problem is that angular doesn't know that split method return pretty much the same thing (it actually returns a new array each time) so it has to call it.

Anto Antony · Accepted Answer · 2018-10-05 09:31:47Z

0

May be you can try this way by using an additional *ngFor

<li *ngFor='let category of categorys'>
    <div *ngFor="let subCategory of (category.sub_category_names.split(','))">{{ subCategory }}</div>
</li>

https://stackblitz.com/edit/angular-a4s1bq

answered Oct 5, 2018 at 9:31

Anto Antony

8826 silver badges13 bronze badges

Comments

Eydrian · Accepted Answer · 2019-02-22 20:49:37Z

0

You can also split the sub-categories on return of the data. And then use *ngFor on the sub-categories. In ES6 this would look like this:

this.categories = data.map((e => {
  return {
     ...e,
     sub_category_names: e.sub_category_names.split(',')
  }
}));

btw. plural of category is categories

https://stackblitz.com/edit/js-rkkyjs

edited Feb 22, 2019 at 20:49

answered Oct 5, 2018 at 9:32

Eydrian

10.9k3 gold badges22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Displaying comma separated string in Angular 6

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related