Данные перехватчика ответа неполные

Question

У меня есть странная проблема, которую я не могу понять. Я надеюсь, что кто-то может мне помочь.

Plunker: http://plnkr.co/edit/e9B6jc - по какой-то причине я не могу воспроизвести ситуацию в plunker, но поскольку он создан, я оставляю его здесь, чтобы показать настройки и ожидаемые данные.

Установка такова:

• сервер с API.
• Сервер с веб-интерфейсом с угловым.

Процесс выглядит так:

1. я сделать запрос GET к API (/api/employees/{guid}), который возвращает данные как employee.json в plunker. Я использую ngResouce (угловой ресурс) для запроса API.
2. Он перехватывается HttpInterceptor, который добавляет некоторые требуемые заголовки к запросу.
3. Когда сервер возвращает данные (ответ сервера), ответ снова перехватывается HttpInterceptor. Он делает некоторые вещи и отклоняется или продолжает в зависимости от статуса.
4. Когда он продолжается, данные просто передаются обратно контроллеру.

Моя проблема заключается между 3 и 4: когда перехватывается ответ (3), я регистрировать данные (как показано на script.js в plunker, строка 35) и, произвольно, я получаю response.data.account.roles пустой. Я уверен, что массив ролей не пуст, потому что, когда я проверяю данные в Инструментах разработчика (вкладка Google Chrome, Сеть), ответ содержит все данные. Даже в журналах API (на стороне сервера) массив ролей не пуст.

Странно то, что когда я регистрирую перехваченный ответ, response.data.account.roles МОЖЕТ быть пустым (да, не всегда). Однако, если я регистрирую объект явно (используя response.data.account.roles), массив никогда не будет пустым.

В пользовательском интерфейсе я использую угловое отображение полного объекта (index.html плункера, строка 17), а иногда account.roles пуст. Иногда я говорю, потому что это происходит, когда я перезагружаю страницу. Это, конечно, вызывает проблемы в пользовательском интерфейсе, потому что response.data.account.roles иногда пуст, и мне нужно, чтобы он задавал выбранные элементы выбранного элемента.

Я сделал несколько тестов:

• Put контрольной точки в угловом resource.js (где выполняются реакция) и response.data содержит все ожидаемые роли.
• Поместите другую точку останова в angular.js, в $ http (config) .transformResponse (частный метод) и, опять же, ответ (без синтаксического анализа) завершен (роли присутствуют).

• Внутри httpInterceptor, если я делаю угловую копию объекта ответа, массив ролей заполняется.

  var copy = angular.copy(response); 
  // copy.data.account.roles.length > 0 = true 
  // response.data.account.roles.length > 0 = false 
  

В первых 2-х тестах, ответы содержат ожидаемые данные, но, как ни странно, в пользовательском интерфейсе (и перехватчик) роли массив является пустым. .

Я надеюсь, что кто-то может просветить меня, потому что я не могу понять :(Кстати, я задал этот вопрос в Google группах тоже ->https://groups.google.com/forum/#!topic/angular/ecJmyjBOvvc

Спасибо всем, кто читает это

.

код plunker это:

script.js

var app = angular.module('app', ['ngResource']); 

app.factory('HttpInterceptor', function($rootScope, $log, $q, $injector, $location) { 
    var interceptor = { 
    request: onRequest, 
    requestError: onRequestError, 
    response: onResponse, 
    responseError: onResponseError 
    }; 
    return interceptor; 

    function onRequest(config) { 
    $log.debug('Entering request.'); 
    config.headers['Accept-Language'] = 'es-cl'; 
    if (config.url.endsWith('.html')) { 
     return config; 
    } 
    config.headers['Accept'] = 'application/json'; 
    var token = 'token data that comes from server'; 
    if (!angular.isUndefined(token)) { 
     config.headers.Authorization = token; 
    } 
    $log.debug('Leaving request.'); 
    return config; 
    } 

    function onRequestError(error) { 
    $log.error('Request failed.', error); 
    } 

    function onResponse(response) { 
    $log.info('Response success.'); 
    // Roles array is empty 
    // Here, when the account is present, the roles array MAY be empty 
    $log.debug('Intercepted response data:', response); 
    if (response) { 
     if (response.data) { 
     if (response.data.account) { 
      // Data shown correctly 
      // Here, when the account is present, the roles array ALWAYS has data 
      // (of course, only when the roles is not empty) 
      if (response.data.account.roles) { 
      $log.debug('Roles:', response.data.account.roles); 
      } 
     } 
     } 
    } 

    var copy = angular.copy(response); 
    // copy.data.account.roles.length > 0 = true 
    // response.data.account.roles > 0 = false (sometimes) 

    return response || $q.when(response); 
    } 
}); 

mainController.js

angular.module('app').controller('mainCtrl', function($scope, $http, JsonFactory) { 
    JsonFactory.get(function(data) { 
    $scope.employee = data; 
    }); 
}); 

jsonFactory.js

angular.module('app').factory('JsonFactory', function($resource) { 
    return $resource('employee.json'); 
}); 

employee.json (ожидаемый ответ сервера)

{ 
    "id" : "employee-guid", 
    "firstName" : "Test", 
    "lastName" : "Subject", 
    "nationalId" : "1-9", 
    "account" : { 
    "login" : "1-9", 
    "email" : "a@a.com", 
    "roles" : [ 
     { 
     "id" : "role0-guid", 
     "name" : "unpriv", 
     "displayName" : "No permissions at all", 
     "description" : "Some descriptive text" 
     }, 
     { 
     "id" : "role1-guid", 
     "name" : "somepriv", 
     "displayName" : "Some permissions", 
     "description" : "Some descriptive text" 
     } 
    ] 
    } 
} 

index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
    <script src="https://code.angularjs.org/1.4.8/angular-resource.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src="jsonFactory.js"></script> 
    <script src="mainController.js"></script> 
    </head> 

    <body ng-app="app"> 
    <div ng-controller="mainCtrl as ctrl"> 
     <div> 
     <h4>Employee</h4> 
     <pre>{{ employee | json }}</pre> 
     </div> 
     <div> 
     <h4>Roles</h4> 
     <pre>{{ employee.account.roles | json }}</pre> 
     </div> 
    </div> 
    </body> 

</html> 

Обновление 12-01-2016

copy.data.account.roles иногда может быть пустым.

Я знаю, что $log.debug|info|etc не показывает текущее состояние объекта, поэтому я использовал контрольные точки для проверки объектов в Google Chrome.

Угловая версия 1.4.

Answer 1

Ну, я решил свою проблему ... дело в том, что директива, которую я использую, удаляет содержимое массива.

Спасибо всем, кто нашел время, чтобы прочитать это.