Angular 7 - How to display array inside of an object in HTML - 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>

Answer 1

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.