CODEWITHSUNDEEP
arraysjsonangularloopsview
David Encina Martínez
David Encina Martínez

Reputation: 113

Iteration on Angular template

I've been working on a Angular project for a few weeks now, and I'm starting to process data to the view.

However, I'm starting to work with iterations, taken from a big JSON, which I've tried to iterate over but I cannot get it right.

I have this JSON:

{
    "id": 1,
    "title": "App Komputer",
    "description": "Website dedicated to computer related products",
    "accessCode": "5128",
    "createdAt": "2022-01-13T21:19:11.000Z",
    "updatedAt": "2022-01-13T21:19:16.000Z",
    "sprints": [{
        "id": 1,
        "title": "Sprint 1",
        "releaseDate": "2022-01-20T21:37:13.000Z",
        "description": "Specs up to 01/22/2022",
        "createdAt": "2022-01-13T21:37:58.000Z",
        "updatedAt": "2021-12-13T01:46:36.000Z",
        "projectId": 1,
        "specifications": [{
            "id": 1,
            "title": "Add product button",
            "description": "New product button HTML",
            "duration": 10,
            "status": 1,
            "createdAt": "2021-12-23T01:46:36.000Z",
            "updatedAt": "2021-12-23T01:46:36.000Z",
            "sprintId": 1
        }]
    }]
}

And I'm trying to iterate it so be shown like this:

<div>
  <h1>{{ title }}</h1>
  <span>Access Code: {{ access_code }}</span>
    -- foreach sprints as sprint --
    <div>{{ sprint.title }}</div>
    -- foreach specifications as specification --
    <div>{{ specification.title }}</div>
    <span>{{ specification.description}}</span>
</div>

This is my function, from where I get the data:

getProject(id: string): void {
    this.projectService.get(id)
      .subscribe({
        next: (data) => {
          this.currentProject = data; // currentProject is the JSON
          console.log(data);
        },
        error: (e) => console.error(e)
      });
  }

Can someone help me to accomplish the desired result in my HTML view? How can I iterate through the JSON data?

Thank you very much!

Upvotes: 1

Views: 888

Answers (1)

Preetha Pinto
Preetha Pinto

Reputation: 342

You can use *ngFor directive to iterate over an array and display item data.

lets assume that the variable data has your json data. In this case this is how your HTML template would look like.

<h1>{{ title }}</h1>
<span>Access Code: {{ data?.access_code }}</span>
<div *ngFor="let sprint of data.sprints">
        <div>{{ sprint.title }}</div>
        <div *ngFor="let specification of sprint.specifications">
            <div>{{ specification.title }}</div>
            <span>{{ specification.description }}</span>
        </div>
 </div>

Upvotes: 1

Related Questions