Question

我正在尝试从函数getShiftDetails（）返回数据

SS_Mod_App.controller("SS_Ctrl", function ($scope, $http, $location, $window, $sce) {

     var ShiftDetails = []; var ShiftDtls = [];

    ShiftDtls = getShiftDetails();
      //  alert(ShiftDtls);  -->  ShiftDtls undefined
        insertDaysHtml(ShiftDtls);  

function getShiftDetails() {
        $http({
            method: 'GET',
            url: 'http://xxxxx/api/Shift/GetShiftDetails',
            params: { }
            , headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            ShiftDetails = response.data;               --> successful response with data     
            alert(JSON.stringify(ShiftDetails.length));    -->  getting length 21 here
            return ShiftDetails;  
        }, function errorCallback(response) {  });
    }

并希望将其传递给下一个函数insertDaysHtml，在该函数中要对其进行迭代并按如下所示获取ShiftDetails的数据，但如下所示会出现错误。

 function insertDaysHtml(ShiftDtls) {    
        alert(JSON.stringify($scope.ShiftDetails.length));   --> Length "0" here
    //alert(JSON.stringify(ShiftDtls.length)); Error msg: TypeError: Cannot read property 'length' of undefined
    // if (ShiftDtls.length > 0) {  --> Error msg: TypeError: Cannot read property 'length' of undefined

        if ($scope.ShiftDtls.length > 0) {  
           // alert(ShiftDtls.length );
            dayhtmlContent = dayhtmlContent + '<tr> '
            for (var j = 0; j <= ShiftDtls.length; j++) {
                dayhtmlContent = dayhtmlContent + '<td> $scope.ShiftDtls[ ' + j + '].ShiftName[0]));'                 
            }

        $scope.divHtmlDay = $sce.trustAsHtml(dayhtmlContent);
    }

Answer 1

getShiftDetails正在使用Promise进行异步调用。您可以阅读有关JavaScript中Promise和异步的工作原理的说明。但是要回答您的问题，

ShiftDtls = getShiftDetails();

如果看到函数getShiftDetails的主体，则它不返回任何内容。因此，您得到undefined。

要使其生效，请在successCallback内执行操作，而不要返回值。

Answer 2

首先，您没有从getShiftDetails()函数返回任何内容。因此，您需要添加一个return语句，如下所示：

function getShiftDetails() {
  return $http({
    method: 'GET',
    url: 'http://xxxxx/api/Shift/GetShiftDetails',
    params: {},
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    ShiftDetails = response.data;
    -- > successful response with data
    alert(JSON.stringify(ShiftDetails.length));
    -- > getting length 21 here
    return ShiftDetails;
  }, function errorCallback(response) {});
}

第二，，您的getShiftDetails()函数正在使用Promise进行异步调用。因此，下面的语句在获取数据之前被执行

ShiftDtls = getShiftDetails();
//  alert(ShiftDtls);  -->  ShiftDtls undefined
insertDaysHtml(ShiftDtls); 
//this statement is executing before getting data

因此，一种可能的解决方案是从已解析的请求函数中调用insertDaysHtml()函数。像这样：

function getShiftDetails() {
  $http({
    method: 'GET',
    url: 'http://xxxxx/api/Shift/GetShiftDetails',
    params: {},
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    ShiftDetails = response.data;
    -- > successful response with data
    alert(JSON.stringify(ShiftDetails.length));
    -- > getting length 21 here
    insertDaysHtml(response.data); //invoke function from here
  }, function errorCallback(response) {});
}

希望，这会对您有所帮助。谢谢！

Answer 3

要了解发生了什么，想象一下HTTP会长期运行，而不是在本地主机上花很多时间。在javascript中，这可以通过异步调用来实现，因此在等待响应时不会阻塞程序，并且当响应最终出现时，将在所谓的回调函数中对其进行处理。要强制控制器等待响应，您必须使用Promises。

// Service
YearService.getCurrentYearId = function(){
  var defferer = $q.defer();
  $http.get('years')
    .then(function(response){
      deffer = response;
  });
  return defferer.promise;
};
  
 // Controller
function getData(){
  YearService.getYears()
    .then(function(data){
      YearCtrl.years = data;
  });
}

我必须注意的另一件事：代码行：

return ShiftDetails;

这是严重错误，您正在尝试从函数内部的函数返回。在javascript中，有很多回调函数，它们不容易保持整洁，但是您必须进一步了解它们，因为它们确实有帮助。它们不是由您调用的，因此，如果您尝试从它们中返回，则它们的响应不会被您的变量捕获，您要从回调函数中返回的唯一原因是，如果要在某个点上停止执行，例如，如果您使用forEach函数来查找条件数组中的第一个元素，那么在找到第一个满足条件的元素后，您不想检查这些元素，如下所示：

var first;
elements.forEach(function(element) {
  if(isFirst(element)){
    first = element;
    return;
  }
});

AngularJ无法从函数返回数据

3 个答案: