It’s been days with this issue I’m having lately.
I’m trying to iterate over a Object in JSON but I cannot have access to.
I’ve created lots of posts before relating the same issue, but I cannot find the solution.
I’m trying to iterate this very JSON from my API (Node.js):
{
"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
}]
}]
}
This is my project-details.component.ts, from where through the function getProject() I get the JSON.
import { Component, Input, OnInit } from '@angular/core';
import { ProjectService } from 'src/app/services/project.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/project.model';
import { Title } from "@angular/platform-browser";
import { Moment } from 'moment';
import { EChartsOption } from 'echarts';
@Component({
selector: 'app-project-details',
templateUrl: './project-details.component.html',
styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {
@Input() viewMode = false;
@Input() currentProject: Project = {
title: '',
description: '',
accessCode: ''
};
message = '';
constructor(
private projectService: ProjectService,
private route: ActivatedRoute,
private router: Router,
private _titleService: Title
) { }
ngOnInit(): void {
if (!this.viewMode) {
this.message = '';
this.getProject(this.route.snapshot.params["id"]);
}
}
getProject(id: string): void {
this.projectService.get(id)
.subscribe({
next: (data) => {
this.currentProject = data;
console.log(data);
this._titleService.setTitle(data.title+' ยท Scrumy');
},
error: (e) => console.error(e)
});
}
}
I need to access the sub array called sprints from my template, which is:
<mat-toolbar>
<span>{{ currentProject.title }}</span>
</mat-toolbar>
<div class="data-panel">
<mat-card>
<mat-toolbar style="border-radius: 4px 4px 0px 0px;">
<span>Development</span>
</mat-toolbar>
<mat-card-content>
<span>Access Code: {{ currentProject.accessCode }}</span>
<div *ngFor="let item of currentProject | keyvalue">
{{item.key}}:{{item.value}}
</div>
</mat-card-content>
</mat-card>
</div>
But with this, I got this error:
Compiled with problems:X
ERROR
src/app/components/project-details/project-details.component.html:11:38 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type 'Project' is not assignable to parameter of type 'Record<keyof Project, any> | ReadonlyMap<keyof Project, any> | null | undefined'.
11 <div *ngFor="let item of currentProject | keyvalue">
~~~~~~~~~~~~~~
src/app/components/project-details/project-details.component.ts:11:16
11 templateUrl: './project-details.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProjectDetailsComponent.
I don’t know what to do from now on.
If I get the first level data from the JSON (f.e: title), it will work correctly. But if I try to iterate over the subarray, I get this very error.
How can I solve this?
Thank you very much for your wisdom and experience.