Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Замена статических данных JSON на $HTTP запрос в AngularJS (https://javascript.ru/forum/angular/71814-zamena-staticheskikh-dannykh-json-na-%24http-zapros-v-angularjs.html)

kingstakh 14.12.2017 22:43

Замена статических данных JSON на $HTTP запрос в AngularJS
 
Доброго всем!
Долго уже борюсь с плагином под Ionic, который позволяет использовать директиву свайпа слайдов как табы в Material Design. Никак не получается подружить его с API Wordpress. Знаний в Angular чуть больше 0, поэтому рассчитываю на помощь сообщества.

Ссылочка на плагин: https://market.ionicframework.com/plugins/swiped-tab



Рабочий пример: http://play.ionic.io/app/f518c3cb3825

Собственно работает он с JSON данными следующим образом: берет данные из catgs, где name - это табы, а items соответственно содержание табов.

Пытался заменить var cats на $http запрос данных API блога на вордпресс, но ничего не вышло, не работает. В логе данные приходят, но табы не формируются.

Теперь немного о моей "хотелке": нужно каким-то образом переделать фэктори catgs, чтобы табы формировались из $http запроса к API вордпресс категорий, например:http://demo.wp-api.org/wp-json/wp/v2/categories. А содержание (посты) формировались из другого запроса http://demo.wp-api.org/wp-json/wp/v2/posts?categories=<ID>, где ID это ID категории из первого запроса для табов.
Например, посты из категории 1: http://demo.wp-api.org/wp-json/wp/v2/posts?categories=1

Пытался получить хотя бы категории таким образом:

angular.module('starter.services', [])    
        .factory('catgs', function($http) {
          var catgs = null;    
          return {
            all: function() {
              if(catgs != null)
              return catgs;
              $http.get('http://demo.wp-api.org/wp-json/wp/v2/categories/').then(function(res){
               catgs = res.data;//
               console.log (catgs);
               return catgs;
             })
            },
            remove: function(catg) {
              catgs.splice(catgs.indexOf(catg), 1);
            },
            get: function(catgId) {
              for (var i = 0; i < catgs.length; i++) {
                if (catgs[i].id === parseInt(catgId)) {
                  return catgs[i];
                }
              }
              return null;
            }
          };
        });


В логе данные есть, но табы не формируются

Фух, надеюсь не очень страшно все описал :write:

destus 15.12.2017 08:38

kingstakh,
где внешний код, который вызывает метод all? Ну и return поставьте перед $http.get

kingstakh 15.12.2017 09:01

Цитата:

Сообщение от destus (Сообщение 472955)
kingstakh,
Ну и return поставьте перед $http.get

так есть вроде ...

Цитата:

Сообщение от destus (Сообщение 472955)
kingstakh,
где внешний код, который вызывает метод all?

В контроллере
.controller('productsCtrl', function ($scope, catgs, $ionicSlideBoxDelegate, $window, $ionicGesture) {
    //this array  control the loading  of pages  so if the corresponding key of a slide is 'true', angular can load it's content'
    $scope.ready = [];
    $scope.catgs = catgs.all();



    $scope.$on("$ionicView.afterEnter", function (event, data) {
        angular.forEach($scope.catgs, function (value, key)
        {

          if(key===0)
          {
            $scope.ready.push(0 + ': ' + true);
          }

            $scope.ready.push(key + ': ' + false);
        });
    });


    $scope.changeSlide = function (index) 
    {
      $scope.ready.push(index + ': ' + true);
    };


  })

destus 15.12.2017 09:29

kingstakh,
all: function() {
              if(catgs != null) {return Promise.resolve(catgs);}
              return $http.get('http://demo.wp-api.org/wp-json/wp/v2/categories/').then(function(res){
               catgs = res.data;
               console.log (catgs);
               return catgs;
             })
}


.controller('productsCtrl', function ($scope, catgs, $ionicSlideBoxDelegate, $window, $ionicGesture) {
    //this array  control the loading  of pages  so if the corresponding key of a slide is 'true', angular can load it's content'
    $scope.ready = [];

    $scope.$on("$ionicView.afterEnter", function (event, data) {
        catgs.all().then(function(catgs) {
         $scope.catgs = catgs;
         angular.forEach($scope.catgs, function (value, key)
            {
 
                if(key===0) {
                   $scope.ready.push(0 + ': ' + true);
                }

            $scope.ready.push(key + ': ' + false);
        });
        })
    });


    $scope.changeSlide = function (index) 
    {
      $scope.ready.push(index + ': ' + true);
    };


  })

kingstakh 15.12.2017 09:58

:thanks: Благодарю, теперь все ок, категории на своих местах. Осталось решить вторую часть вопроса, чтобы отображались записи из каждой категории. Может сможете помочь и здесь?

Идея такая, при смене слайда новый запрос, но уже по другой ссылке http://demo.wp-api.org/wp-json/wp/v2/posts?categories=<ID>, где ID это ID категории из первого запроса для табов. ID получить через index, но тут у меня даже примеров нет, без понятия как это сделать. Понимаю что это надо где-то здесь get: function(catgId) ...


Часовой пояс GMT +3, время: 10:26.