Angularjs - Loading JSON data with $scope values (dynamic) returns undefined

Question

I have ng-model to my input field like below.

<div ng-app="myApp" ng-controller="GlobalCtrl">
    <input type="text" ng-model="FirstName">
        {{FirstName}}
</div>

Now in my controller console.log $scope.FirstName is the correct values I give in my view.

But when I try to load the $scope into a JSON like structure I get undefined.

myApp.controller('GlobalCtrl', function($scope) {

    $scope.loadedata = {"asd":$scope.FirstName};
    console.log($scope.FirstName); //this is fine
    console.log($scope.loadedata); //but this is undefined.
});

Now $scope.loadedata) is undefined. why is it? what am I doing wrong?

I did get my values in string format. And I am fine with $scope.FirstName but my problem is with $scope.loadedata still persists. — scope-username
– scope-username, Commented Mar 6, 2018 at 19:34

Michael Walker · Accepted Answer · 2018-03-06 17:30:52Z

1

There are a few things about your code snippet. You are using an input bar where your DOM is trying to render FirstName which is undefined. See this demo for the proper us of the input and two-way binding template-controller relationship.

https://material.angularjs.org/latest/demo/input

Also, where are you calling the console.log()? I assume after the controller call?

answered Mar 6, 2018 at 17:30

Michael Walker

891 silver badge5 bronze badges

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

1 Comment

scope-username Over a year ago

I am sorry for the confusion. Made few edits. Please check it now.

scope-username · Accepted Answer · 2018-03-06 19:51:32Z

1

My view:

<div ng-app="myApp" ng-controller="GlobalCtrl">
<input type="text" ng-model="req.FirstName">
    {{req.FirstName}}
</div>

My Controller :

myApp.controller('GlobalCtrl', function($scope) {
$scope.req = {};
console.log(JSON.stringify($scope.req));
});

After a long research, I found out that it's better to do without serializing and you can do like this using ng-model. And it works.

answered Mar 6, 2018 at 19:51

scope-username

752 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angularjs - Loading JSON data with $scope values (dynamic) returns undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related