Угловой Получить данные из $ http request дает undefined

Итак, я хочу получить данные из API (предоставлено Laravel). Я использую $ http в Angular для получения этих данных, и когда я отправляю его на мой взгляд, он работает нормально, но когда я хочу использовать данные внутри контроллера, это не так:

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.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 
    } 
});

консоль дает мне следующее:

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

Моя проблема заключается в том, что, когда я получить доступ к thisApp.getNote внутри $http он работает отлично, но когда я пытаюсь открыть его снаружи я только получаю не определено. Я попытался изменить thisApp на $scope и d. Я также попытался объявить еще один var внутри функции, ни одна из них не имела никакого значения.

Может ли кто-нибудь определить мою проблему?

источник

2016-01-05 BluePrint

$ HTTP является асинхронным, а значит, вы выпалить запрос вокруг линии 17, а затем выполнить линию 26. Поскольку запрос имеет не возвращайся, 'thisApp.getNote' еще не установлен, поэтому он не определен. Он доступен «за пределами» $ http, но только после его установки, чего не происходит до тех пор, пока вызов $ http не будет разрешен, что произойдет когда-нибудь в будущем (если вообще). –

@sethflowers Я вижу, у вас есть хорошее решение для этого? Как положить его в другую функцию или что-то еще? – BluePrint

Нет проблем. Он делает то, что он должен делать. Вы запускаете HTTP-запрос, когда он возвращается, вы устанавливаете данные на что-то. Вы уже это делаете. Это не будет ничего, кроме неопределенного, прежде чем вы установите его. –

Ваш console.log для строки 26 включен вне обещания, которое вы создаете с помощью $ http. Это означает, что он будет работать до того, как обещание будет разрешено, и поэтому до того, как свойство будет установлено, чтобы оно не возвращалось в этот момент неопределенным. Вам нужно подождать, пока вы не пообещаете попробовать использовать эту собственность.

Вы должны создать функцию обратного вызова внутри .Затем для $ HTTP вызова

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 
}

источник

2016-01-05 20:17:46 efarley

Угловой Получить данные из $ http request дает undefined

ответ

Смежные вопросы