Below is my array of JSON objects:
{
"tagFrequency": [
{
"value": "aenean",
"count": 1,
"tagId": 251
},
{
"value": "At",
"count": 1,
"tagId": 249
},
{
"value": "faucibus",
"count": 1,
"tagId": 251
},
{
"value": "ipsum",
"count": 1,
"tagId": 251
},
{
"value": "lobortis",
"count": 1,
"tagId": 194
},
{
"value": "molestie",
"count": 1,
"tagId": 251
},
{
"value": "unde tempor, interdum ut orci metus vel morbi lorem. Et arcu sed wisi urna sit egestas fringilla, at erat. Dolor nunc.",
"count": 1,
"tagId": 199
},
{
"value": "Vestibulum",
"count": 1,
"tagId": 251
}
]
}
I want to display these attributes viz. value, count and tagName(which is taken using tagId) in a table. For first two attributes I am using ngFor. But, I want to also print tagName which I am getting using tagId and storing it in tagNames array. Following is my component code:
frequencies: any;
tagNames: string[] = [];
ngOnInit() {
if (this.route.snapshot.url[0].path === 'tag-frequency') {
let topicId = +this.route.snapshot.params['id'];
this.tagService.getTagFrequency(topicId)
.then(
(response: any) => {
this.frequencies = response.json().tagFrequency
for(let tagFrequency of this.frequencies) {
this.getTagName(tagFrequency.tagId)
}
}
)
.catch(
(error: any) => console.error(error)
)
}
}
getTagName(tagId: number): string {
return this.tagService.getTag(tagId)
.then(
(response: any) => {
this.tagNames.push(response.name)
}
)
.catch(
(error: any) => {
console.error(error)
}
)
}
And this is how I am trying to print them on UI:
<table>
<thead>
<tr>
<th>{{ 'word' }}</th>
<th>{{ 'tag-name' }}</th>
<th>{{ 'frequency' }}</th>
<th></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let name of tagNames">
<tr *ngFor="let frequency of frequencies; let i=index">
<td>{{ frequency.value }}</td>
<td>{{ name }}</td>
<td>{{ frequency.count }}</td>
</tr>
</ng-container>
</tbody>
</table>
But I am getting [object object] under the column tag-name. Can someone help me to resolve this issue?
I tried using ng-container as above, but result looks like this on UI:
Which is wrong. I need only first 3 rows with a tag-names as "Subtag 3", "Zeit1", "Tag 1" for rows 1,2,3 respectively.
Thanks in advance.
You can use index variable, iterate over frequencies array in *ngFor and use its index for tagNames
<tr *ngFor="let frequency of frequencies; let i=index">
<td>{{ frequency.value }}</td>
<td>{{ tagNames[i] }}</td>
<td>{{ frequency.count }}</td>
</tr>
Make sure you have initialized tagNames:
tagNames: string[] = [];
You can't have double *ngFor
on a single element. You can use the helper element <ng-container>
like
<tr *ngFor="let frequency of frequencies; let i=index">
<ng-container *ngFor="let name of tagNames">
<td>{{ frequency.value }}</td>
<td>{{ name }}</td>
<td>{{ frequency.count }}</td>
</ng-container>
</tr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With