Looping with in an array to get required data in angular - json

Question

I have an JSON as mentioned below:
[{
"_id": 1,
"Name": "x",
"Email": "z#epsilon.com ",
"Designation": "Manager",
"Project": "x",
"Skills": [{
"Technology": "Big Data- Hadoop, Hive, HDFS",
"Level": "Theoretical",
"TotalExperience": ""
},
{
"Technology": "Oracle PL/SQL",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "Informatica PowerExchange 8.x",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "IBM Datastage 7.5",
"Level": "Beginer",
"TotalExperience": ""
},
{
"Technology": "MS Word",
"Level": "Expert",
"TotalExperience": ""
},
{
"Technology": "USnit testing",
"Level": "Expert",
"TotalExperience": ""
}
]
}];
I want to show it as a tabular format in angular as Name, Project, Designation, Skills (Under skills: theoretical, expert, intermediate) and then the data.
I am able to achieve all but only skills which is an inner table am not able loop though correctly

Answer 1

Here, try this:
Template:
<table border="1">
<thead>
<td>Name</td>
<td>Project</td>
<td>Designation</td>
<td>Skills</td>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<td>{{ datum.Name }}</td>
<td>{{ datum.Project }}</td>
<td>{{ datum.Designation }}</td>
<table border="1">
<thead>
<td>Theoritical</td>
<td>Beginer</td>
<td>Intermediate</td>
<td>Expert</td>
</thead>
<tbody>
<tr>
<td>{{ filterSkillBy(datum.Skills, 'Theoretical') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Beginer') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Intermediate') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Expert') }}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
data = [...];
filterSkillBy(skills: any[], by) {
return skills.filter(skill => skill.Level === by).map(skill => skill.Technology).toString();
}
}
Here's a Sample StackBlitz for your ref.