At my angular application, I'm trying to create a comma separated list of values I've got from my API response.
The API response looks like this:
{
"release_date":"2012-03-14",
"some_relation":[
{
"id":"2604ebbf-4eb5-46e3-89d8-ab4e8ecc8275",
"name":"ABC"
},
{
"id":"5267a0c6-9423-4e28-a413-133cc3435612",
"name":"DEF"
},
{
"id":"13d1454a-fc0e-457c-9f8e-9a9952984d8c",
"name":"GHI"
}
],
}
some_relation in nested, so I created an interface for this logic to work:
export interface SomeResponse {
some_relation: some[];
}
export interface some {
id: string;
name: string;
}
At my html template, I now do this:
<div *ngFor="let some of some_response.some_relation">
<small>{{ some.name }}</small>
</div>
Which returns the following output:
ABC
DEF
GHI
Instead of multiple lines outputted, I would like to have it that way:
ABC, DEF, GHI
How can this be accomplished?
Thanks in advance.
You can do it like this:
div for span so it would not put each item in new line, only if it's not the last item<span *ngFor="let item of some_response.some_relation; let last = last">
<small>{{ item.name }}</small><span *ngIf="!last">, </span>
</span>
That's because you are using *ngFor on division tag instead of small tag and it is creating 3 division with a small tag in each division. Division is a block element and each division is rendered on the next line. Try doing something like this for single line rendering:
<small *ngFor="let some of some_response.some_relation" >
{{ some.name }}
</small>
Edit: Since you want the comma in between you can use this:
<small>
{{ some_response.some_relation.reduce((total, obj, index) => index? total + ", " + obj.name: obj.name, "") }}
</small>