Angularjs scope data inside the function

Question

I am trying to display the data to my view but $scope.plan outputs {}. I am thinking that it would output the fetched data from the initGetEdit function, console.log() inside the $http.post outputs expected data.

controller.js

var id = $stateParams.id;

$scope.plan = {}

$scope.initGetEdit = function(){
    var data = { id : id }
    $http.post("someUrl", data).then(function(res){
        $scope.plan = res.data;
        console.log($scope.plan); //----> logs expected data
    })
}
$scope.initGetEdit();

console.log($scope.plan);  //----> logs {}

In my view I have something like this.

view

<input ng-model="plan.something" type="text" />

UPDATE

First thank you for those answers provided and the comments, appreciated it. It gives me an insight. I solved my issue by removing the initGetEdit function and staying with just the http.post.

this is to be expected. $http.post is asynchronous, which means the UI does not wait for it to complete before continuing to the next statement. Therefore, the console.log() at the end is reached before the data from the server is returned. Angular fires a $digest after the data is changed, which updates the view, but that has no effect on the console.log calls. — Claies
– Claies, Commented Nov 29, 2017 at 7:11
Since post is async, console.log($scope.plan); at the page end would print empty object. But after sometime, your view would be updated. — Jagan
– Jagan, Commented Nov 29, 2017 at 7:11

Ujjwala Bollam · Accepted Answer · 2017-11-29 08:33:43Z

2

Try keeping the second console in watch.

$scope.$watch('plan',function(){
  console.log($scope.plan);
});

edited Nov 29, 2017 at 8:33

answered Nov 29, 2017 at 7:02

Ujjwala Bollam

1599 bronze badges

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

Comments

Kalaiselvan · Accepted Answer · 2017-11-29 07:10:30Z

At first, you declare a variable $scope.plan = {} after that in http call of your $scope.initGetEdit function its empty object after the function http is an async call your object may be filled based on the response. until that it will be an empty object.

@Ujjwala Bollam mention in answer to print it in the console.

  var app = angular.module('testApp',[]);
    app.controller('testCtrl',function($scope,$http){
    //var id = $stateParams.id;
    var id=1;

     $scope.plan = {}

     $scope.initGetEdit = function(){
     var data = { id : id }
    //$http.post("http://someurl", data).then(function(res){
        $scope.plan ={id:1,something:"hai this is response data"};
        console.log($scope.plan); //----> logs expected data
    //})
   }
$scope.initGetEdit();

console.log($scope.plan);  //----> logs {}
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div ng-app="testApp" ng-controller="testCtrl">
    
    <input ng-model="plan.something" type="text" />
    </div>

Collectives™ on Stack Overflow

Angularjs scope data inside the function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related