import {
Component,
OnInit
} from '@angular/core';
import {
ResumedataService
} from "../../services/resumedata.service";
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {
projectdata: any = [];
constructor(private resumeservice: ResumedataService) {}
ngOnInit() {
// service call
this.resumeservice.getresumedata().subscribe(data => (this.projectdata = data.projects));
}
}<div *ngFor="let item of projectdata">
<h5>{{item.projectName}}</h5>
<span>{{item.technologies.tech}}</span>
</div>
//******this is jason data******* "projects": [ { "id":1, "projectName": "Flight Reservation System", "technologies": [ {"tech":"html"}, {"tech":"css"}, {"tech":"javascript"}, {"tech":"jquery"}, {"tech":"sql"}, {"tech":"angular"} ] }, { "id":2, "projectName":
"Train Reservation System", "technologies": [ {"tech":"html"}, {"tech":"css"}, {"tech":"javascript"}, {"tech":"jquery"}, {"tech":"sql"}, {"tech":"angular"} ] } ]Above is my source code as you can see i want to fetch data through as I am successfully getting the name of the project but the object called "technologies" has children so how can I fetch them take a look if there is any mistake..??
projects.technologies is also an array, so you also need to iterate through them.
f.e.:
<div *ngFor="let item of projectdata">
<h5>{{item.projectName}}</h5>
<ng-container *ngFor="let technologie of item.technologies">
<span>{{technologie.tech}}</span>
</ng-container>
</div>