How to fetch typical json data using Angular

Question

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..??

this.projectdata = data.projects, this.technologydata = data.technologies — arizafar
– arizafar, Commented Jan 31, 2020 at 9:15

BartoszTermena · Accepted Answer · 2020-01-31 09:17:52Z

2

Just use another *ngFor:

<div *ngFor="let item of data">
  {{item.projectName}}
  <br />
  <ul *ngFor="let t of item.technologies">
    <li>{{t.tech}}</li>
  </ul>
  </div>

https://stackblitz.com/edit/angular-3xsmgy?file=src/app/app.component.html

Hope it helps!

answered Jan 31, 2020 at 9:17

BartoszTermena

1,4871 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deelde · Accepted Answer · 2020-01-31 09:18:01Z

1

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>

answered Jan 31, 2020 at 9:18

deelde

1,61114 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to fetch typical json data using Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related