CODEWITHSUNDEEP
javascriptangularjscontrollergetresponse
BluePrint
BluePrint

Reputation: 2134

Angular Get data from $http request gives undefined

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:

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?

Upvotes: 2

Views: 1354

Answers (1)

efarley
efarley

Reputation: 8651

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
}

Upvotes: 3

Related Questions