AngularJs не может вернуть данные из функции

getShiftDetails выполняет асинхронный вызов, используя Promise. Вы можете прочитать о том, как работает Promise и асинхронность в JavaScript, для разъяснения. Но чтобы ответить на ваш вопрос,

ShiftDtls = getShiftDetails();

Если вы видите тело функции getShiftDetails, она ничего не возвращает. Итак, вы получаете undefined.

Чтобы заставить это работать, делайте свое дело внутри successCallback вместо того, чтобы возвращать значение.

Прежде всего, вы ничего не возвращаете из функции 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) {});
}

Надеюсь, что это поможет вам. Спасибо!

Чтобы понять, что происходит, представьте, что HTTP выполняет длительный цикл вместо того, чтобы делать круг на вашем локальном хосте, это занимает много времени. В javascript это стало возможным благодаря асинхронному вызову, поэтому программа не блокируется в ожидании ответа, а когда ответ наконец получен, он обрабатывается в так называемой функции обратного вызова. Чтобы заставить контроллер ждать ответа, вы должны использовать промисы.

// 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 очень много callback-функций, их непросто содержать в чистоте, но вам придется узнать о них больше, потому что они действительно помогают. Они не вызываются вами, поэтому, если вы попытаетесь вернуться из них, их ответ не будет пойман вашими переменными, хотя единственная причина, по которой вы хотите вернуться из функции обратного вызова, - это если вы хотите остановить выполнение в точке , например, если вы используете функцию forEach для поиска первого элемента в массиве с условием, вы не хотите проверять элементы после того, как вы нашли первый элемент, удовлетворяющий условию, примерно так:

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