Thursday, February 4, 2010

MooTools Users: Implement a Hash.sort method

I notice that Firefox seems to maintain the order of key:value pairs in objects when iterating over them, while Safari and Chrome seem to sort the object internally (within their respective JS engines).  I  noticed this especially when making select elements.  I store the options as an object, then when drawing the page, I iterate over that  object making option elements. 
For example, I am making a select box that lists users  alphabetically.  Users are identified in the database by an id: 

 
var foo = new Element('select').inject($$('body')[0]); 
var options = {5082:'User A', 5085:'User B', 5074:'User C'} 
$H(options).each(function(name,id){ 
  new Element('option', {text:name, value:id}).inject(foo); 

}); 
In Firefox the select box would present users in order: A,B,C, but in the others, users would appear in order by id: C,A,B.  A neat function  for tackling this sort of problem would be Hash.sort. 
 
/* 
        Function: Hash.sort 
                Takes {c:0, a:1, b:2} and returns [{a:1},{b:2},{c:0}] 
*/ 
Hash.Implement({ 
sort:function(fn){ 
        var out = [], 
                keysToSort = this.getKeys(), 
                m = this.getLength(); 
        (typeof fn == 'function') ? keysToSort.sort(fn) : keysToSort.sort(); 
        for (var i=0; i<m; i++){ 
                var o = {}; 
                o[keysToSort[i]] = this[keysToSort[i]]; 
                out.push(o); 
        } 
        return out; 

} 
}); 
____________ 
 
Usage: 

 
$H({'a':1,'z':2,'c':3,'b':4}).sort() 

 
Results In: 

 
[Object { a=1}, Object { b=4}, Object { c=3}, Object { z=2}] 
______________________ 

 
Then our select box routine becomes: 

 
var foo = new Element('select').inject($$('body')[0]); 
var options = {5082:'User A', 5085:'User B', 5074:'User C'} 
$H(options).sort().each(function(el){ 
  $each(el,function(name, id){ 
    new Element('option', {text:name, value:id}).inject(foo); 
  }); 

}); 
_______ 
 
Ruby programmers may recognize this method (http://ruby-doc.org/core/ 
classes/Hash.html#M002865).

10 comments:

  1. IVR Plugin solution is a competent automated interactive voice response & speech recognition software which adhibit automated technology.

    ReplyDelete
  2. So, you will be ready http://www.unitedcheckcashing.com to notice U.S.A. all time check cashing close to Pine Tree State supplying you with the only services with one hundred pc satisfaction within really short quantity.
    check cashing near me

    ReplyDelete

  3. افضل شركة كشف تسربات المياه بالمدينة المنورة شركات كشف تسربات المياه بالمدينة المنورة
    شركة كشف تسربات المياه بالاحساء  شركة كشف تسربات المياه بالاحساء

    شركة مكافحة حشرات بالرياض شركة مكافحة حشرات بالرياض
    شركة رش مبيدات بالرياض شركة رش مبيدات بالرياض

    ReplyDelete
  4. This was nice and amazing and the given contents were very useful and the precision has given here is good.

    Python Training In Pune
    python training institute in pune

    ReplyDelete
  5. You can book call girl in Guwahati or escort Service in Guwahati for incall facility or
    outcall Facility as and when required.To book Guwahati call girls you
    can visit the following links
    Escort Service in Guwahati
    Call Girl Service in Guwahati

    ReplyDelete
  6. Make your daily life passionately amazing with Guwahati escort and call girl services.
    Romance is not a simple factor that you can bargain with.
    Escorts in Guwahati
    Escort services in Guwahati

    ReplyDelete
  7. Explore the profiles of guwahati escorts, guwahati call girls, call girls in guwahati and
    escorts in guwahati for female companionship in top rated hotels.
    Get affordable escort services in guwahati hotels now.
    Guwahati call girls
    Call girls in Guwahati

    ReplyDelete
  8. Maybe you are also looking for the right person to ensure the higher quality
    sex and that’s why you are in this place because here we are going to share
    the data and information of Guwahati Escorts.
    Guwahati escorts
    Guwahati Call Girls

    ReplyDelete