javascript - Angular Get data from $http request gives undefined -
so, want data api (provided laravel). using $http in angular data, , when send forward view, works fine, when want use data inside controller, doesn't:
html:
<!doctype html> <html ng-app="todoapp"> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="/js/maincontroller.js"></script> </head> <body ng-controller="maincontroller mycontrol"> <h1>todo-list:</h1> <div> <table> <tr> <th>note:</th> <th>author:</th> <th>project:</th> <th>created:</th> <th>deadline:</th> </tr> <tr ng-repeat="todo in mycontrol.todos"> <td> {{ todo.content }} </td> <td> {{ todo.user }} </td> <td> {{ todo.project }} </td> <td> {{ todo.created }} </td> <td> {{ todo.deadline }} </td> <td><button ng-click="mycontrol.showupd(todo.id)">update</button></td> </tr> </table> </div> </body> </html> angular controller:
angular.module('todoapp', []).controller('maincontroller', function($scope, $http) { var thisapp = this; // below works without problems when accessing html-view: $http({method : 'get', url : 'http://localhost:8000/notes'}) .then (function(response) { thisapp.todos = response.data; }, function() { alert("error getting todo notes"); }); // function doen't work intended thisapp.showupd = function(noteid) { $http({method : 'get', url : 'http://localhost:8000/notes/' + noteid}) .then (function(response) { thisapp.getnote = response.data; console.log(thisapp.getnote); // maincontroller.js:20 alert("got data"); }, function() { alert("error getting todo note"); }); console.log(thisapp.getnote); // maincontroller.js:26 } }); the console gives me following:
maincontroller.js:26 undefinedmaincontroller.js:20 object {id: 1, content: "asdasd", completed: 0, deadline: "2016-01-14 10:29:38"}
my problem when access thisapp.getnote inside $http works fine, when try access outside undefined. have tried changing thisapp $scopeandd have tried declare var inside function, none of them made difference.
can spot problem?
your console.log line 26 included outside of promise create $http. means run before promise has resolved , therefor before property has been set return undefined @ point in time. need wait until after have resolved promise try , use property.
you should create callback inside .then $http call
thisapp.showupd = function(noteid) { $http({method : 'get', url : 'http://localhost:8000/notes/' + noteid}) .then (function(response) { thisapp.getnote = response.data; console.log(thisapp.getnote); // maincontroller.js:20 alert("got data"); thisapp.logme(); // call callback here run code depends on thisapp.getnote being defined. }, function() { alert("error getting todo note"); }); } // create callback function called when $http promise has been resolved not until then. thisapp.logme = function() { console.log(thisapp.getnote); // maincontroller.js:26 }
Comments
Post a Comment