How can I pull in more WordPress posts from my angular app, using the WordPress REST api

1 Views

I am trying to build a page of WordPress posts, showing 4 initially and then lazy load these in onclick of a “Load More” button. This list will be filterable via angular.

I am using the json rest api plugin for WordPress, and my angular app is currently:

Read More
var myapp = angular.module( 'myapp', [] );

// Set the configuration
myapp.run( ['$rootScope', function($rootScope) {

    // Variables defined by wp_localize_script
    $rootScope.api = aeJS.api;

}]);

// Add a controller
myapp.controller( 'mycontroller', ['$scope', '$http', function( $scope, $http ) {

    // Load posts from the WordPress API
    $http({
        method: 'GET',
        url: $scope.api,
        params: {
            'filter[posts_per_page]' : 4
        },
    }).
    success( function( data, status, headers, config ) {
        $scope.posts = data;
    }).
    error(function(data, status, headers, config) {});

    $scope.loadmore = function(){
        $scope.posts = $scope.posts.concat(data);
    }



}]);

I am just a bit clueless with how to get the next 4 posts each time the load more button is clicked. I have setup a loadmore function which I am calling on click of the button: 

<button ng-click="loadmore()">Load more articles</button>

Any advice would be appreciated, thanks.

Post Views: 1

Related posts

2 comments

  1. Basically you need to use paging which has already implemented in wordpress API.

    You need to increment your posts_per_page on each ajax call.

    Controller

    myapp.controller('mycontroller', ['$scope', '$http', function($scope, $http) {
    var count = 0;
     $scope.posts = []; //setted as blank
    $scope.getData = function() {
        // Load posts from the WordPress API
        $http({
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]': 4,
                'filter[page]': ++count
            },
        }).
        success(function(data, status, headers, config) {
            $scope.posts = $scope.posts.concat(data);
        }).
        error(function(data, status, headers, config) {});
    };

    $scope.loadmore = function() {
        $scope.getData();
    };
}]);

  2. Done – with the help from a friend, this solution is working nicely:

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

// Set the configuration
myapp.run( ['$rootScope', function($rootScope) {

    // Variables defined by wp_localize_script
    $rootScope.api = aeJS.api;

}]);

myapp.controller('mycontroller', ['$scope', '$http', function($scope, $http) {

    $scope.init = function() {
        $http({ // Load posts from the WordPress API
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]' : 4
            },
        }).
        success( function( data, status, headers, config ) {
            $scope.posts = data;
        }).
        error(function(data, status, headers, config) {});
    };
    var page = 2;
    $scope.getData = function() {
        $http({ // Load posts from the WordPress API
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]': 4,
                'page': page
            },
        }).
        success(function(data, status, headers, config) {
            $scope.posts = $scope.posts.concat(data);
            page++;
        }).
        error(function(data, status, headers, config) {});
    };

    $scope.loadmore = function() {
        $scope.getData();
    };
}]);

Comments are closed.