Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2017, 22:43
Аспирант
Отправить личное сообщение для kingstakh Посмотреть профиль Найти все сообщения от kingstakh
 
Регистрация: 21.02.2014
Сообщений: 37

Замена статических данных 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;
            }
          };
        });


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

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

Последний раз редактировалось kingstakh, 14.12.2017 в 22:47.
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2017, 08:38
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

kingstakh,
где внешний код, который вызывает метод all? Ну и return поставьте перед $http.get
Ответить с цитированием
  #3 (permalink)  
Старый 15.12.2017, 09:01
Аспирант
Отправить личное сообщение для kingstakh Посмотреть профиль Найти все сообщения от kingstakh
 
Регистрация: 21.02.2014
Сообщений: 37

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

Сообщение от destus Посмотреть сообщение
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);
    };


  })
Ответить с цитированием
  #4 (permalink)  
Старый 15.12.2017, 09:29
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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);
    };


  })
Ответить с цитированием
  #5 (permalink)  
Старый 15.12.2017, 09:58
Аспирант
Отправить личное сообщение для kingstakh Посмотреть профиль Найти все сообщения от kingstakh
 
Регистрация: 21.02.2014
Сообщений: 37

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

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

Последний раз редактировалось kingstakh, 15.12.2017 в 10:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена статических данных JSON на $HTTP запрос в AngularJS kingstakh Библиотеки/Тулкиты/Фреймворки 0 14.12.2017 22:37
POST запрос в формате JSON pokk Общие вопросы Javascript 5 01.12.2017 16:34
Как в angularjs соединиться с базой данных (на примере todo-list ниже)? okuznetsov1 Angular.js 3 18.01.2017 15:26
Сортировка JSON данных в цикле Fareastaz jQuery 12 15.03.2013 20:20
Синхронный запрос данных по AJAX Shasoft AJAX и COMET 2 03.03.2009 14:07