CODEWITHSUNDEEP
angulartypescript
DeadInsideProgrammer
DeadInsideProgrammer

Reputation: 41

Data comes back from API fine but specific fields still undefined

Im calling an API where Ive made a simple model that mirrors my angular interface completely.

The problem is that even though I define the variable I push the data into of that interface type, it still returns the object fields as undefined. I have no idea why but if anyone knows what simple mistake I might be blindly making please point it out.

The method in my service calling 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;
      })
    );

The call to my service from within ngInit (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();
      }   
    );

And finally the interface used to bind the variable to

export interface IDevProject 
{
    Id: number;
    Name: string;
    Description: string;
    Image: string;
}

Added image of the console for ref Added image of the console for ref

Upvotes: 0

Views: 824

Answers (2)

Jonathan Lopez
Jonathan Lopez

Reputation: 186

You are using Pascal case for the interface and also trying to access the properties. You should use camelCase because I can see in the console that you the API response with camelCase.

console.log("Checking Name >>>> " + data[id].name);

Also, you can consider using prettier to format your code in Angular

Upvotes: 1

Den
Den

Reputation: 786

The name of properties in your interface should be in lowercase.

Upvotes: 0

Related Questions