Sorting Dynamic Data with Isotope

Question

I am trying to use Isotope.js to sort data by type. There seem to be a few ways to do this however they all require that you know the sort variables before hand.

One of the best examples of what I'm talking about is found in this question.

In the example they are trying to sort by class for example group all elements with class .milk like so:

milk: function( $elem ) {
    var isMilk = $elem.hasClass('milk');
    return (!isMilk?' ':'');
},

A jsfiddle is provided here: http://jsfiddle.net/Yvk9q/9/

My problem:

I am pulling the categories (classes or data-type) from a user generated database. For this reason I cannot simply add all the sorting variables to the code before hand.

I played with the fiddle and got a semi working sort here: http://jsfiddle.net/BandonRandon/erfXH/1/ by using data-category instead of class. However,this just sorts all data alphabetically not by actual category.

Some possible solutions:

1. Use JSON to return an array of all categories and then use this to loop through classes
2. Use inline javascript and run a PHP loop inside a <script> tag
3. Write an external PHP file with a javascript header

What I'm looking for
The simplest best approach here, being if it's one of the solutions above or something different. This doesn't seem like it should need to be this complicated. So I may be over complicating this.

EDIT:

I now have a json array of my data but I can't figure out how to pass the data into the isotope settings when i try something like this

var $container = $('.sort-container');

var opts = {
    itemSelector: '.member-item',
    layoutMode: 'straightDown',
    getSortData : {
        $.getJSON( 'member-cat-json.php', function(data) { 
            $.each(data, function(i, item) {
                var slug = data[i].slug;
                slug : function( $elem ) {
                    var is+slug = $elem.hasClass(slug);
                    return (!is+slug?' ':'');
                    }
                }
            }); 
        });
    }                                       
}

var $container = $('.sort-container');

$container.isotope(opts);

It fails because I can't use a loop inside of the plugin settings. Not sure what can be done about this though.

EDIT 2:

I found this question which seems about what I'm trying to do but unfortunately the most recent jsfiddle fails with isotope

Here is a sample of my JSON output:

{term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}
{term_id:9, name:Eggs, slug:eggs, term_group:0, term_taxonomy_id:17...}

I am using the slug as the class name and in my loop.

Answer 1

I'm not sure I entirely understand your question, but I'll state my assumptions and work from there:

• You have data in a format as described above:

  {term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}

• You want to sort on the slug names, even though we do not know what the slugs will be named ahead of time.

Assuming these two things, the fiddle you've linked to is close, but has a problem due to closures which I have fixed.

As expected, your situation is similar to the one listed, except that you need to obtain the JSON data first, as you have.

var $container = $('.sort-container'),
    createSortFunction = function(slug) {
        return function($elem) {
            return $elem.hasClass(slug) ? ' ' : '';
        };
    }, 
    getSortData = function(data) {
        var sortMethods = {};

        for (var index in data) {
            var slug = data[index].slug;

            // immediately create the function to avoid
            // closure problems
            sortMethods[slug] = createSortFunction(slug);
        }

        return sortMethods;
    }

$.getJSON('member-cat-json.php', function (data) {
    // I'm wrapping the isotop creation inside the `getJSON`
    // call, just to ensure that we have `data`

    $container.isotope({
        itemSelector: '.member-item',
        layoutMode: 'straightDown',
        getSortData: getSortData(data);
    });
});