display array data in sorted order

Question

I am trying to display multi dimensional array in 3 columns as alphabetical order, I am able to sort the array.

Currently my list displayed as:

Amanda    Brad   Lisha
Madley    Mowaki

But, I want the result as below format

Amanda     Lisha    Mowaki
Brad       Madley

Here is my 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);

    for (var i = 0; i < 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.

Answer 1

Append the data items to a column div first then add the column to the main, and then float the divs left

CSS

.column {
    float:left; //Put each column next to each other.
}
.column .dataItem {
    display:block; //so each one displays on its own line.
}

Javascript

var column = jQuery('<div class="column"></div>');
var maxColumnRows = 2;
var rIndex = 0;
for(var i=0;i<data.length;i++)
{        
    if(rIndex > maxColumnRows-1) { //-1 because 0 index
        $('.main').append(column);
        column = jQuery('<div class="column"></div>');
            rIndex=0;
    }

    var dataItem = "<a href='#' class='dataItem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>";

    column.append(dataItem);
    rIndex++;
}
$('main').append(column); //append last column

Answer 2

It seems that your array is being sorted properly, and it's just wrapping to the second line of that div. The issue here isn't the sort, it's the html layout.

What you would have to do is something like the following after you have your sorted array:

Create three html columns, first off. Use css float:left; width: 33%; float:left; width: 33%; to get them all next to each other. Then, you need to calculate how many pieces of data are going to make it into the three columns, and then throw them in the columns in chunks. There's some math involved, but it's not too crazy.

HTML:

<div id="col-A"></div>
<div id="col-B"></div>
<div id="col-C"></div>

Javascript

var cols = 3;
var data = [/*This is your array*/];
//find out how many things we should have for three equal columns
var numPerCol = Math.ceil(data.length/cols);
//this lets us reference column names by number (0,1,2)
var colNames = ["col-A","col-B","col-C"];
var whichCol, colElem, newElem;
//loop through the data!
for( var i=0; i<cols; i++){
    //determine which column this piece of data is going in 0 = col-A, 1 = col-B etc
    whichCol = Math.floor(i/numPerCol);
    //retrieve the column element
    colElem = document.getElementById(colNames[whichCol]);
    //create a new div element for our piece of data
    newElem = document.createElement("div");
    newElem.innerText = data[i];
    newElem.style.display = "block";
    //slap it into the column!
    colElem.appendChild(newElem);
}

Here's a fiddle of this working, and I'm sure you can get it modified to fit your data: http://jsfiddle.net/hbQ2T/

It's dynamic enough that it doesn't matter how much data you have, it'll split it into three columns equally.