javascript - display array data in sorted order -

i trying display multi dimensional array in 3 columns alphabetical order, able sort array.

currently list displayed as:

 amanda    brad   lisha madley    mowaki 

but, want result below format

 amanda     lisha    mowaki brad       madley 

here fiddle

html:

<div> <div class='main'></div>  <div id='description'></div> </div> 

js:

$(function () {     function compare(a, b) {         if (a.name < b.name) return -1;         if (a.name > b.name) return 1;         return 0;     }     data.sort(compare);      (var = 0; < data.length; i++) {         var dataitem = "<a href='#' class='dataitem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>";         $('.main').append(dataitem);         //alert(data[i]['name']);              if (i % 3 == 2) {             $('.main').append("</br>");         }     }      var description = $('#description');     $('a.dataitem').on('click', function (e) {         description.text($(this).data('description'));     }) }); 

thanks.

it seems array being sorted properly, , it's wrapping second line of div. issue here isn't sort, it's html layout.

what have following after have sorted array:

create 3 html columns, first off. use css float:left; width: 33%; them next each other. then, need calculate how many pieces of data going make 3 columns, , throw them in columns in chunks. there's math involved, it's not crazy.

html:

<div id="col-a"></div> <div id="col-b"></div> <div id="col-c"></div> 

javascript

var cols = 3; var data = [/*this array*/]; //find out how many things should have 3 equal columns var numpercol = math.ceil(data.length/cols); //this lets reference column names number (0,1,2) var colnames = ["col-a","col-b","col-c"]; var whichcol, colelem, newelem; //loop through data! for( var i=0; i<cols; i++){     //determine column piece of data going in 0 = col-a, 1 = col-b etc     whichcol = math.floor(i/numpercol);     //retrieve column element     colelem = document.getelementbyid(colnames[whichcol]);     //create new div element our piece of data     newelem = document.createelement("div");     newelem.innertext = data[i];     newelem.style.display = "block";     //slap column!     colelem.appendchild(newelem); } 

here's fiddle of working, , i'm sure can modified fit data: http://jsfiddle.net/hbq2t/

it's dynamic enough doesn't matter how data have, it'll split 3 columns equally.