Getting undefined error in object declaration

Question

Below is my object:

$scope.obj = {
        name: null,
        child: { name : name}
    };

<input type="text" ng-model="obj.name" />

What I am trying to do is when I will have latest value in my obj.name property it should automatically get reflected in obj.child.name property.

I would always like to use updated value and everywhere I am using obj.child.name property only so later on if I forgot to assign like below:

$scope.obj.child.name = $scope.obj.name

then it will always use old value and I don't want to do this at so many place. So I want this process to be automated like whenever name $scope.obj.name will be updated; it should automatically update $scope.obj.child.name.

But with above code I am getting error: name is undefined.

Why is the above declaration not possible and how to achieve this?

This won't work because there is no name variable in the given context. You can create a function and return the value of name from it. child: function() { return this.name; }. — Tushar
– Tushar, Commented May 30, 2017 at 7:23
@Tushar Can you provide this in the form of answer with some more details like explanation and how to use it.please — I Love Stackoverflow
– I Love Stackoverflow, Commented May 30, 2017 at 7:29
@Tushar But then will it be accessible like this if i follow your suggestion : $scope.obj.child.name ?? — I Love Stackoverflow
– I Love Stackoverflow, Commented May 30, 2017 at 7:58

cнŝdk · Accepted Answer · 2017-05-30 07:39:36Z

1

You are getting name is undefined because JavaScript is trying to find a name object in the global scope and can't find it, in this code:

child: { name : name//undefined}

This is how you can define it:

$scope.obj = {
   name: "Ay"
};
$scope.obj.child = {
  name: $scope.obj.name 
}

We will refer to the $scope.obj.name in the child property declaration here so it's correctly binded.

answered May 30, 2017 at 7:39

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

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

7 Comments

I Love Stackoverflow Over a year ago

Ok upvoted for your kind efforts towards helping me but can i have something like this :child: function() { return this.name; } what @Tushar mention in this comment above if you can see

Hamik Hambardzumyan Over a year ago

You can write like this too $scope.obj = { name: null, child: { name : $scope.obj.name } };

cнŝdk Over a year ago

@Learning Yes you can define it like this $scope.obj = { name: "Ay", child: function() { return this.name;} }; but you won't have a child.name proprty, it will be just a function that returns the nameof the $scope.obj.

cнŝdk Over a year ago

@HamikHambardzumyan No you can't, it will fire an error: Cannot read property 'name' of undefined.

cнŝdk Over a year ago

Yes, if you follow the child: function() { return this.name; } suggestion, you won't be able to get $scope.obj.child.name as child is just a function.

|

rrd · Accepted Answer · 2017-05-30 07:24:32Z

0

You're declaring obj wrong:

$scope obj = {
  name: null,
  child: { name : name}
};

Should be

$scope.obj = {
  name: null,
  child: { name : name}
};

answered May 30, 2017 at 7:24

rrd

5,9873 gold badges32 silver badges37 bronze badges

1 Comment

I Love Stackoverflow Over a year ago

Sorry it was a typo mistake.i have updated my question but still the problem is same

Collectives™ on Stack Overflow

Getting undefined error in object declaration

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related