Menu icon Foundation
Using the Wordpress JSON REST API to populate app

I'm new to Foundation for apps, so I've set myself a simple task of creating a few pages, which I would like to populate via JSON.

I'm very happy to tinker, but usually start from a working model and despite hours of trying to get things working, I can't seem to manage this.

Using a recent tutorial on Smashing Mahazine http://www.smashingmagazine.com/2015/04/28/creating-web-app-in-foundation-for-apps/ and tried to adapt it.

In my development console, I can see that I've got as far as accessing the data from my Wordpress install, but can't seem to accurately cut down and amend the code in the demo to just grab the content.

I'm not looking for someone to do this for me, but some pointers would be very gratefully received.

I've included my code, I know it's a mess, I want to tidy it up, but hacking away at it tends to break the little functionality I do have, so I'd like to try and understand it more first.

(function() {
  'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
  .controller('ArticlesCtrl', function($scope, $state, $http){
    $scope = genericController($scope, $state, $http, 'posts', 'article');
  })
  .directive("getProp", ['$http', '$filter', function($http, $filter) {
    return {
      template: "{{property}}",
      scope: {
        prop: "=",
        url: "="
      },
      link: function(scope, element, attrs) {
        // Use Aerobatic's caching if we're on that server
        var urlApi = scope.url,
          queryParams = {
            cache: true
          };

        if (window.location.hostname.match('aerobaticapp')) {
          queryParams = {
            params: {
              url: urlApi,
              cache: 1,
              ttl: 30000 // cache for 500 minutes
            }
          }
          urlApi = '/proxy';
        }

        var capitalize = $filter('capitalize');
        $http.get(urlApi, queryParams).then(function(result) {
          scope.property = capitalize(result.data[scope.prop]);
        }, function(err) {
          scope.property = "Unknown";
        });
      }
    }
  }])
  .filter('capitalize', function() {
    return function (input) {
      return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1)}) : '';
    }
  })
  .filter('lastdir', function () {
    return function (input) {
      return (!!input) ? input.split('/').slice(-2, -1)[0] : '';
    }
  })
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:true,
      requireBase: true
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

  function genericController($scope, $state, $http, multiple, single){

    // Grab URL parameters
    $scope.id = ($state.params.id || '');
    $scope.page = ($state.params.p || 1);

    // Use Aerobatic's caching if we're on that server
    // var urlApi = "http://swapi.co/api/"+multiple+"/"+$scope.id+"?page="+$scope.page,
    var urlApi = "http://mysite.co.uk/wordpressinstall/wp-json/"+multiple+"/"+$scope.id+"?page="+$scope.page,
      queryParams = {
        cache: true
      };

    if (window.location.hostname.match('aerobaticapp')) {
      queryParams = {
        params: {
          url: urlApi,
          cache: 1,
          ttl: 30000 // cache for 500 minutes
        }
      }
      urlApi = '/proxy';
    }

    if ($scope.page == 1) {
      if ($scope.id != '') {
        // We've got a URL parameter, so let's get the single entity's data
        $http.get(urlApi, queryParams)
          .success(function(data) {
            // The HTTP GET only works if it's referencing an ng-repeat'ed array for some reason...
            if (data.homeworld) data.homeworld = [data.homeworld];

            $scope[single] = data;

            var name = data.name;
            if (single == 'article') name = data.title;
          })

      } else {
        // We're on page 1, so thet next page is 2.
        $http.get(urlApi, queryParams)
        .success(function(data) {
          $scope[multiple] = data;
          if (data['next']) $scope.nextPage = 2;
        });
      }
    } else {
      // If there's a next page, let's add it. Otherwise just add the previous page button.
      $http.get(urlApi, queryParams)
      .success(function(data) {
        $scope[multiple] = data;
        if (data['next']) $scope.nextPage = 1*$scope.page + 1;
      });
      $scope.prevPage = 1*$scope.page - 1;
    }
    return $scope;

  }

})();
            

         

wordpressJSONapiRESTapps

I'm new to Foundation for apps, so I've set myself a simple task of creating a few pages, which I would like to populate via JSON.

I'm very happy to tinker, but usually start from a working model and despite hours of trying to get things working, I can't seem to manage this.

Using a recent tutorial on Smashing Mahazine http://www.smashingmagazine.com/2015/04/28/creating-web-app-in-foundation-for-apps/ and tried to adapt it.

In my development console, I can see that I've got as far as accessing the data from my Wordpress install, but can't seem to accurately cut down and amend the code in the demo to just grab the content.

I'm not looking for someone to do this for me, but some pointers would be very gratefully received.

I've included my code, I know it's a mess, I want to tidy it up, but hacking away at it tends to break the little functionality I do have, so I'd like to try and understand it more first.

(function() {
  'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
  .controller('ArticlesCtrl', function($scope, $state, $http){
    $scope = genericController($scope, $state, $http, 'posts', 'article');
  })
  .directive("getProp", ['$http', '$filter', function($http, $filter) {
    return {
      template: "{{property}}",
      scope: {
        prop: "=",
        url: "="
      },
      link: function(scope, element, attrs) {
        // Use Aerobatic's caching if we're on that server
        var urlApi = scope.url,
          queryParams = {
            cache: true
          };

        if (window.location.hostname.match('aerobaticapp')) {
          queryParams = {
            params: {
              url: urlApi,
              cache: 1,
              ttl: 30000 // cache for 500 minutes
            }
          }
          urlApi = '/proxy';
        }

        var capitalize = $filter('capitalize');
        $http.get(urlApi, queryParams).then(function(result) {
          scope.property = capitalize(result.data[scope.prop]);
        }, function(err) {
          scope.property = "Unknown";
        });
      }
    }
  }])
  .filter('capitalize', function() {
    return function (input) {
      return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1)}) : '';
    }
  })
  .filter('lastdir', function () {
    return function (input) {
      return (!!input) ? input.split('/').slice(-2, -1)[0] : '';
    }
  })
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:true,
      requireBase: true
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

  function genericController($scope, $state, $http, multiple, single){

    // Grab URL parameters
    $scope.id = ($state.params.id || '');
    $scope.page = ($state.params.p || 1);

    // Use Aerobatic's caching if we're on that server
    // var urlApi = "http://swapi.co/api/"+multiple+"/"+$scope.id+"?page="+$scope.page,
    var urlApi = "http://mysite.co.uk/wordpressinstall/wp-json/"+multiple+"/"+$scope.id+"?page="+$scope.page,
      queryParams = {
        cache: true
      };

    if (window.location.hostname.match('aerobaticapp')) {
      queryParams = {
        params: {
          url: urlApi,
          cache: 1,
          ttl: 30000 // cache for 500 minutes
        }
      }
      urlApi = '/proxy';
    }

    if ($scope.page == 1) {
      if ($scope.id != '') {
        // We've got a URL parameter, so let's get the single entity's data
        $http.get(urlApi, queryParams)
          .success(function(data) {
            // The HTTP GET only works if it's referencing an ng-repeat'ed array for some reason...
            if (data.homeworld) data.homeworld = [data.homeworld];

            $scope[single] = data;

            var name = data.name;
            if (single == 'article') name = data.title;
          })

      } else {
        // We're on page 1, so thet next page is 2.
        $http.get(urlApi, queryParams)
        .success(function(data) {
          $scope[multiple] = data;
          if (data['next']) $scope.nextPage = 2;
        });
      }
    } else {
      // If there's a next page, let's add it. Otherwise just add the previous page button.
      $http.get(urlApi, queryParams)
      .success(function(data) {
        $scope[multiple] = data;
        if (data['next']) $scope.nextPage = 1*$scope.page + 1;
      });
      $scope.prevPage = 1*$scope.page - 1;
    }
    return $scope;

  }

})();