Returning ordered json data inside filter.js using JsonQuery

Question

I'm using filter.js from https://github.com/jiren/filter.js - great script.

var FJS = FilterJS(products, '#products', {
    template: '#productfinder-template',
    search: {ele: '#searchbox'},
    callbacks: {
        beforeAddRecords: function(records){
            var jq = JsonQuery(records); 
            console.log(jq.order({'artnr': 'asc'}).exec());
        },
        afterFilter: function(result){
            $('#total_products').text(result.length+' records found');
        }
    }
});

Inside the callback "beforeAddRecord" i called the JsonQuery "order" function and the result is an ordered Json list, just the way i wanted. The problem is getting this result on the screen.

Has anyone have experience with this script?

Answer 1

Did some testing and found following working. I put the code on a button click for testing purposes.

jQuery("#xselected").on('click', function(){ 
    var jq = JsonQuery(products); 
    products = jq.order({'artnr': 'asc','category':'asc'}).exec();
    FJS.removeRecords({});
    FJS.addRecords(products);
    FJS.filter;
});

Removed all records from the filter and added them back after using the order function from JsonQuery.

Answer 2

I can't comment yet, so I will post this as a second answer. I was encountering some strange behavior from the code posted by recoder , where the data from "products" was doubling when I switched between filters. This wasn't a big deal with small numbers of items, but when I added more, and sorted multiple times, it started to slow everything down.

The issue is not with FJS, but with the "on click" function. It apparently saves all the data from each change event for the session. To fix this, just add .unbind() before the .on() .

jQuery("#xselected").unbind().on('click', function(){ 
    var jq = JsonQuery(products); 
    products = jq.order({'artnr': 'asc','category':'asc'}).exec();
    FJS.removeRecords({});
    FJS.addRecords(products);
    FJS.filter;
});