Angular 7 - How to display array inside of an object in HTML

Question

I am trying to display array inside of an object in HTML. My sample JSON is like below...

I would like to display Product > ProductCategoryRelations > Category.Name in a string comma separeted like "Category 1, Category 2"

[
  {
    "Id": 2,
    "Name": "Product 1",
    "ProductCategoryRelations": [
        {
                "Id": 3,
                "ProductId": 2,
                "CategoryId": 2,
                "Active": true,
                "Category": {
                        "Id": 2,
                        "ParentId": 1,
                        "Name": "Category 1"                    
                }
        },
        {
                "Id": 4,
                "ProductId": 2,
                "CategoryId": 2,
                "Active": true,
                "Category": {
                        "Id": 2,
                        "ParentId": 1,
                        "Name": "Category 2"
                }
        }
    ],

How can I put all categories name in a string comma seperated?

What I have so fas is like below but it doesnt worrk

<dd class="col-sm-9" *ngFor="let category of product.ProductCategoryRelations">
  <span>{{category.Name}}</span>
</dd>

Eugene Ghanizadeh Khoub · Accepted Answer · 2019-06-13 15:28:53Z

In javascript, you would need this:

product.ProductCategoryRelations
        .map(r => r.Category.Name)
        .join(',')

to put it in context:

let product = {
                "Id": 2,
                "Name": "Product 1",
                "ProductCategoryRelations": [
                        {
                                "Id": 3,
                                "ProductId": 2,
                                "CategoryId": 2,
                                "Active": true,
                                "Category": {
                                        "Id": 2,
                                        "ParentId": 1,
                                        "Name": "Category 1"                    
                                }
                        },
                        {
                                "Id": 4,
                                "ProductId": 2,
                                "CategoryId": 2,
                                "Active": true,
                                "Category": {
                                        "Id": 2,
                                        "ParentId": 1,
                                        "Name": "Category 2"
                                }
                        }
                ],
};

console.log(
  product.ProductCategoryRelations
    .map(r => r.Category.Name)
    .join(',')
);

Now you can use .join(',') in Angular template syntax, but you cannot use the .map() bit. So I suspect the easiest way would be to add a utility function to your component that does this for you:

getCategoryNames(product) {
  return product.ProductCategoryRelations.map(r => r.Category.Name);
}

and then do it in the template like this:

{{getCategoryNames(product).join(',')}}

If you need to do the same thing in multiple places in your app across multiple components, then I would recommend writing your own custom pipe.

Collectives™ on Stack Overflow

Angular 7 - How to display array inside of an object in HTML

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related