Angular Get data from $http request gives undefined

Question

So, I want to get data from an API (provided by Laravel). I am using $http in Angular to get this data, and when I send it forward to my view, it works fine, but when I want to use the data inside the controller, it 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 as 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 any problems when accessing it from the html-view:

    $http({method : 'GET', url : 'http://localhost:8000/notes'})
        .then (function(response) {
            thisApp.todos = response.data;
        }, function() {
            alert("Error getting todo notes");
        });

    // But this function doen't work as 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 the following:

MainController.js:26 undefined
MainController.js:20 Object {id: 1, content: "asdasd", completed: 0, deadline: "2016-01-14 10:29:38"}

My problem is that when I access thisApp.getNote inside the $http it works fine, but when I try to access it outside I only get undefined. I have tried changing thisApp to $scopeandd I have also tried to declare another var inside the function, none of them made any difference.

Can anyone spot my problem?

$http is asynchronous, which means you fire off the request around line 17, and then execute line 26. Since the request has not come back, thisApp.getNote hasn't been set yet, so it is undefined. It is available "outside" the $http, but only after it is set, which doesn't happen until the $http call is resolved, which happens sometime in the future (if at all). — Seth Flowers
– Seth Flowers, Commented Jan 5, 2016 at 20:09
@sethflowers I see, do you have any good solution for this? Like putting it in another function or something? — BluePrint
– BluePrint, Commented Jan 5, 2016 at 20:16
There's not really a problem. It is doing what it is supposed to be doing. You fire off an http request, when it comes back, you set the data on something. You are already doing this. It will never be anything other than undefined before you set it. — Seth Flowers
– Seth Flowers, Commented Jan 5, 2016 at 20:19

efarley · Accepted Answer · 2016-01-05 20:17:46Z

Your console.log for line 26 is included outside of the promise you create with the $http. This means it will run before the promise has resolved and therefor before the property has been set so it would return undefined at that point in time. You need to wait until after you have resolved the promise to try and use the property.

You should create a callback inside the .then for your $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 the callback here to run the code that depends on thisApp.getNote being defined.
        }, function() {
            alert("Error getting todo note");
        });
}

// Create a callback function that will be called when the $http promise has been resolved but not until then.
thisApp.logMe = function() { 
    console.log(thisApp.getNote); // MainController.js:26
}

Collectives™ on Stack Overflow

Angular Get data from $http request gives undefined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related