javascript - Sorting Dynamic Data with Isotope -

i trying use isotope.js sort data type. there seem few ways require know sort variables before hand.

one of best examples of i'm talking found in this question.

in example trying sort class example group elements class .milk so:

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

a jsfiddle provided here: http://jsfiddle.net/yvk9q/9/

my problem:

i pulling categories (classes or data-type) user generated database. reason cannot add sorting variables code before hand.

i played fiddle , got semi working sort here: http://jsfiddle.net/bandonrandon/erfxh/1/ using data-category instead of class. however,this sorts data alphabetically not actual category.

some possible solutions:

1. use json return array of categories , use loop through classes
2. use inline javascript , run php loop inside <script> tag
3. write external php file javascript header

what i'm looking for
simplest best approach here, being if it's 1 of solutions above or different. doesn't seem should need complicated. may on complicating this.

edit:

i have json array of data can't figure out how pass data isotope settings when try 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 can't use loop inside of plugin settings. not sure can done though.

edit 2:

i found this question seems i'm trying unfortunately most recent jsfiddle fails isotope

here sample of 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 using slug class name , in loop.

i'm not sure entirely understand question, i'll state assumptions , work there:

• you have data in format described above:

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

• you want sort on slug names, though not know slugs named ahead of time.

assuming these 2 things, fiddle you've linked close, has problem due closures i have fixed.

as expected, situation similar 1 listed, except need obtain json data first, have.

var $container = $('.sort-container'),     createsortfunction = function(slug) {         return function($elem) {             return $elem.hasclass(slug) ? ' ' : '';         };     },      getsortdata = function(data) {         var sortmethods = {};          (var index in data) {             var slug = data[index].slug;              // create function avoid             // closure problems             sortmethods[slug] = createsortfunction(slug);         }          return sortmethods;     }  $.getjson('member-cat-json.php', function (data) {     // i'm wrapping isotop creation inside `getjson`     // call, ensure have `data`      $container.isotope({         itemselector: '.member-item',         layoutmode: 'straightdown',         getsortdata: getsortdata(data);     }); });