0

I have an angular component that I will fillout based on an API call to a Nodejs server.

This API returns an object sort of like this:

{
    "data": {
        "firstname": "John",
        "lastname": "Doe",
        "age": 34
    }
}

So I create at the TS:

public data: any={};

And then I call the API at ngOnInit, which populates data.

My problem is that at the HTML file, when I want to print lets say data.firstname:

   Your name is {{data.firstname}}

Im getting this error:

TypeError: undefined is not an object (evaluating ctx.data.firstname)

I've learn that if I print the name as follows, that error won't show up:

   Your name is {{data?.firstname}}

But it doesn't work in all cases.

Is there a way to fix this issue? The application works fine; I just dont like to see the errors on the console. Im planning to build this application the cleanest possible way.

thanks.

Improve this question
2
  • try {{data.data.firstname}} Commented Oct 11, 2021 at 21:49
  • not really, that doesn't exist Navnath, because I do data=apiresponse.data so this.data contains only the data object. Commented Oct 11, 2021 at 21:50

2 Answers 2

Reset to default
1

By doing this public data: any={};, you initialize your data attribute as an object instance with no fields.

Thus, on component creation:

  • data is never undefined (so the data?.xxx in the template is useless)
  • but data has no firstname field

That's why you get an error. To fix it declare your attribute as

public data?: any;

And as your data will be undefined, the {{ data?.firstname }} in the template won't be resolved until the OnInit has correctly initialized your attribute with the right fields.

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

6 Comments

Oliver, that worked perfect. Thanks so much. So my mistake was to initialize data basically? I should not initialize any object then?
Because in some cases it is required. For example, I have another variable (payload) that if I dont initialize, I get the same error, so I guess what confuses me is the fact that some have to be initialized and others dont.
Initialize if you have the right data, But if your data intializaton is to be delayed, you had rather not intiailize them. Because it is easier to check in the templates and code if an object is undefined than check if some fields exist on your object
And you should avoid using any. Create a class with the attributes you need {firstname, lastname, ..) and declare your attribute as typed with this class.
@Danielle Better declare your data as data = { firstname: "", "lastname": "", "age": 0 } , as long its small properties. Helps in type
|
1

You can try putting *ngIf="data" on the containing element.

<div *ngIf="data && data.firstname">
   <p>Your name is {{data.firstname}} {{data.lastname}}</p>
   <p>Your age is {{data.age}}</p>
</div>
Improve this answer

3 Comments

Thanks Fuzzy, that will work too, but it will require tons of changes on my front end.
data = {} if(data) // return true
@navrath Which is why I added the second condition data.firstname which will initially be false and prevent the div from showing untill the object is initialized with the correct property values. The second condition is not needed when data is not initialized initially at all and then initialized with all the correct values.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.