When I make a call to an API, I have created a simple model that matches my angular interface exactly.
The issue I am facing is that even though I define the variable where I push the data into of that interface type, it still shows the object fields as undefined. I'm not sure why this is happening, so if anyone can point out any simple mistake I may be unknowingly making, I would appreciate it.
This is the method in my service that calls the api:
var projectsArray: Array<IDevProject> = [];
var project : IDevProject;
return this.http.get<IDevProject[]>(this.baseUrl + 'projects').pipe
(
map(data => {
console.log(data);
for (const id in data)
{
if (data.hasOwnProperty(id))
{
console.log("Checking Name >>>> " + data[id].Name);
projectsArray.push(data[id]);
project = data[id]; // checked with single objects, they also return properties as undefined
}
}
return projectsArray;
})
);
This is how I call my service from ngInit (The parameter passed through is irrelevant):
projectsArray: Array<IDevProject> = [];
this.devService.getAllProjects(this.cardType).subscribe(
data => {
this.projectsArray = data;
// console.log(data)
// console.log(this.projectsArray.length);
this.getArrayCount();
// console.log(this.manyProjects)
this.setMinSixDisplayArray();
}
);
Finally, this is the interface used to bind the variable:
export interface IDevProject
{
Id: number;
Name: string;
Description: string;
Image: string;
}
Link to the console image for reference: https://i.sstatic.net/rSDHm.png