Use filter.js streaming with WordPress JSON API

0 Views

I have filter.js working well with the WordPress JSON API but I have had to tell the JSON API to output all the posts but specifying &count=-1 (usually they are paged in 10s).

This is fine while there aren’t a huge number of posts but as more are added, the longer the WordPress JSON API will take to generate the JSON.

Read More

filter.js offers streaming whereby it grabs chunks of a JSON file and incrementally adds them to the page.

The real issue:

How can I get the ‘streaming’ (which has an AJAX request format of .json?offset=0&limit=50) to use the WordPress JSON API paged results? Each new page requires a new WordPress JSON API call &page=2 etc.

Below is the relevant code I have so far but you can find all of it in a paste bin here: http://pastebin.com/EKhBddmh 

apiLocation: '/api/get_posts/?post_type=business&count=-1',

settings: {
  filter_on_init: true,
  filter_criteria: {
    location: ['.js__filter-location .TYPE.any', 'taxonomy_business_location.ARRAY.slug'],
    type: ['.js__filter-type .TYPE.any', 'taxonomy_business_type.ARRAY.slug']
  },
  search: {
    input: '#filterSearch',
    search_in: '.media__title, .media__body, .media__footer'
  },
  filter_types: {
    any: function( current_value, option ){
      if ( current_value === '') { return true; }
      else { return current_value === option; }
    }
  },

  streaming: {
    data_url: filter.apiLocation,
    stream_after: 1,
    batch_size: 10
  },
}

init: function(){
  return FilterJS( filter.get_api_data( filter.apiLocation ).posts, '#resultsList', filter.view, filter.settings );
}


get_api_data: function( api_location ){

  var data;

  $.ajax({
    async: false, //thats the trick
    url: api_location,
    dataType: 'json',
    success: function( response ){
       data = response;
    }
  });

  return data;

},
Post Views: 0

Related posts

Leave a Reply

1 comment

  1. I haven’t tested this, but something like this should work…

    Try adding these configuration changes. Filter.js will add the params options as query parameters to the request:

    filter = {

    filterCount: 0,
    apiLocation: '/api/get_posts',

    settings: {

        ... keep current settings, including streaming parameter ...

        params: {
            'post_type': 'business',
            'page': 1,
            'count': 10
        },
        callbacks: {
            after_filter: function( result ){

                ... keep current function ...

            },
            before_add: function() {
                filter.settings.params.page++;
            }
        }
    }
}

    Remove the get_api_data function (just let filter.js handle the ajax requests) and change init to:

    init: function(){

    if ( $('body').hasClass('view-map') ) {
        window.googleMap.init();
    }

    filter.bind();
    filter.create_results();

    return FilterJS([], '#resultsList', filter.view, filter.settings);
}