AngularJS: $ http получить Json из внешнего файла

0

Я новичок в угловой и не слишком сильный в javascript для начала. Я пытаюсь создать приложение с использованием ионной структуры. И я пытаюсь получить список из json файла. Я успешно работал с сырым json в переменной. Но теперь я пытаюсь использовать $http.get() для извлечения его из удаленного файла в папке проекта.

.service('staffServices', ['$q', '$http', staffService]);

function staffService($q, $http) {
  var staffs = {};
  var promise = $http.get("/js/jsons/settings.json")
  .success(function(response) {
    staffs = response.staffSettings;
    console.log(staffs);    //HAS WHAT I NEED
  });
  console.log(staffs);      //EMPTY OBJECT


  return {
    loadAllSettings: function () {          
      return $q.when(staffs);          
    },
    query: function (params) {
      return filterFilter(staffs, params);
    },
    get: function (params) {
      return this.query(params)[0];
    }
  }
};

По какой-то причине я не могу получить доступ к результату вне функции .success(). Я не уверен, связано ли это с моим незнанием в javascript или статусе моего новичка в угловом. Пожалуйста, помогите мне

Это мой контроллер ниже. self.settings никогда не заполняется и всегда возвращает пустой объект

.controller("staffCtrl", function (staffServices) {
  var self = this;

  self.settings = [];
  staffServices.loadAllSettings()
  .then(function (settings) {
    self.settings = [].concat(settings);
    console.log(settings);
  });
});
  • 0
    Ваш код работает как положено. Нижний журнал происходит до вызова обещания, поэтому объект все еще пуст. Но ваша функция возврата должна корректно работать с данными ответа (loadAllSettings, query)
  • 0
    Да, я знаю. но это не так. Ничто не возвращается на контроллере ... никогда. Я обновил вопрос, чтобы показать мой контроллер также. @karna
Теги:
variables

2 ответа

1
Лучший ответ

Я считаю, что проблема заключается в том, как вы обрабатываете $ q и обещание, вы можете попробовать это также:

// Removed irrelevant return functions temporarily
.service('staffServices', ['$q', '$http', staffService]);

function staffService($q, $http) {
    var deferredPromise = $q.defer();
    var staffs = {};
    var promise = $http.get("/js/jsons/settings.json")
    .success(function(response) {
        staffs = response.staffSettings;
        console.log(staffs);
        deferredPromise.resolve(staffs);
    })
    .error(function(){
        deferredPromise.reject();
        console.log('Unsucessful json call');
    });

    return {
        loadAllSettings: function () {
            return deferredPromise.promise;
        }
    }
};

.controller("staffCtrl", function (staffServices) {
    var self = this;
    self.settings = [];
    staffServices.loadAllSettings()
    .then(function (settings) {
        console.log(settings);
        self.settings = [].concat(settings);
    });
});
Поделиться
  • 0
    Это сработало :) Я не уверен, почему. Хотите объяснить? @walter
  • 0
    По сути, вам нужно сохранить асинхронный вызов в отложенном обещании и вернуть его. После вызова функции вы получите это обещание, и только после того, как обещание будет разрешено ( .resolve() или .reject() ), код внутри .then() будет выполнен. На самом деле, я считаю, что вы даже можете избавиться от переменной «обещание» внутри функции staffService и просто вызвать $ http.get напрямую
0

Вызов $ http.get является асинхронным, поэтому, когда вы вызываете console.log внутри обратного вызова.success, этот статус фактически не выполняется, пока не будет разрешен запрос $ http.get.

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

Если этот ответ не имеет для вас смысла, или вы не знакомы с асинхронным материалом, могу ли я рекомендовать вам проверить этот вопрос, который хорошо объясняет асинхронные вызовы.

Что касается JSON, который не возвращается должным образом, я считаю, что $ q.when (из функции loadAllSettings()) должен возвращать обещание, когда в настоящее время он возвращает пользовательские настройки объекта JSON. Чтобы использовать вызов.then в возвращаемом заявлении, это должно быть обещание. Попробуйте настроить персонал только как ответ, а затем получить атрибут.staffSettings в контроллере.

.controller("staffCtrl", function (staffService) {
  var self = this;

  self.settings = [];
  staffService.loadAllSettings()
  .then(function (settings) {
    self.settings = [].concat(settings.staffSettings);
    console.log(settings);
  });
});
Поделиться
  • 0
    Спасибо за высказывание идей асинхронных звонков. но функция по-прежнему никогда не возвращает JSON. Есть ли что-то, что я должен сделать, чтобы бежать, когда он наконец получит JSON ?. я обновил вопрос, чтобы показать включены мой контроллер также @turner
  • 0
    Просто попробуйте быстро, прежде чем я посмотрю на другие решения. Можете ли вы обновить «StaffServices», чтобы он стал просто «StaffService» во всех местах (т. Е. В контроллере и в обоих сервисах), и дайте мне знать, если это исправит это? Любые сообщения об ошибках, которые вы можете найти по пути, также будут полезны.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню