Sort array into "rows" in JavaScript

Here is a suggestion using functional methods:

• Reduce the list into arrays of buckets based on day, and sort that list (this is like reading the table you've got on rows)
• Iterate through the rows in order, clear out unused ones.

Here:

//first, we collapse the array into an array of buckets by day
half_sorted = checkin_data.reduce(function(accum,cur){ 
    var bucket = new Date(cur.date).getDay();
    accum[bucket].push(cur);
    return accum;
},[[],[],[],[],[],[],[]]).map(function(day){
    return day.sort(function(x,y){ // now we sort each bucket
        return new Date("01-01-1990 "+x.time) - new Date("01-01-1990 "+y.time);
    });    
});
// At this point, we have an array with 7 cells looking like your table
// if we look at its columns.

// finally, we push to the result table.
var result = [];
var daysToClear = 7;
for(var i=0;daysToClear>0;i=(i+1)%7){
    if(half_sorted[i] && half_sorted[i].length > 0){
        result.push(half_sorted[i].pop());
    }else if(half_sorted[i] && half_sorted[i].length === 0){
        half_sorted[i] = null;
        daysToClear--;
    }
}

Working fiddle

First of all, I think you're going about this in the wrong way. Please see my note below the following code.

To do exactly as you've asked, here's one way:

// parsing the date strings ourselves avoids time zone problems
function dateFromString(string) {
   var parts = string.split('-');
   return new Date(parseInt(parts[0], 10),
                   parseInt(parts[1], 10) - 1,
                   parseInt(parts[2], 10));
}

The above is a utility function.

var i, l, dates = [[], [], [], [], [], [], []], item;
// place the objects into dow-sorted buckets
for (i = 0, l = checkin_data.length; i < l; i += 1) {
   item = checkin_data[i];
   dates[dateFromString(item.date).getDay()].push(item);
}

i = 0;
l = 0;
checkin_data = [];

while (true) { // instead of a for loop to handle the row-wrap manually
   if (dates[i][l]) {
      item = dates[i][l];
      checkin_data.push(item);
   }
   i += 1;
   if (i === 7) {
      if (!item) {
         break; // we had a complete row with no data
      }
      item = undefined;
      l += 1;
      i = 0;
   }
}

checkin_data is now sorted in the order you requested.

Note: you really don't need the second loop, because it is doing most of the work you'll have to do again to use the provided array. So in your routine for writing out the table, instead just use the data structure that the first loop creates. You would of course need a slightly different bailout strategy since you don't want to create an extra blank row, but I'll leave that up to you.

After a bit of thought, though, I came up with another way to do it, if you don't mind adding a new key to your objects:

function dateFromString(string) {
   var parts = string.split('-');
   return new Date(parseInt(parts[0], 10),
                   parseInt(parts[1], 10) - 1,
                   parseInt(parts[2], 10));
}

var i, l, counts = [0, 0, 0, 0, 0, 0, 0], item, dow;

for (i = 0, l = checkin_data.length; i < l; i += 1) {
   item = checkin_data[i];
   dow = dateFromString(item.date).getDay();
   item.sortKey = ++counts[dow] * 7 + dow;
}

checkin_data.sort(function(a, b) {
   return a.sortKey - b.sortKey;
});

I've come up with a solution, maybe not the most elegant, but it's working:

var sorted_data = [], elements_to_dump = [], i, j, tmp;

while (checkin_data.length > 0) {

    for (i = 0; i < checkin_data.length; i++) {
        if (checkin_data[i-1]) {
            if (checkin_data[i-1].date === checkin_data[i].date) {
                continue;
            } 
        }
        sorted_data.push(checkin_data[i]);
        elements_to_dump.push(checkin_data[i].id);
    }
    for (j = 0; j < elements_to_dump.length; j++) {
        for (i = 0; i < checkin_data.length; i++) {
            if (checkin_data[i].id === elements_to_dump[j]) {
                tmp = checkin_data.splice(i, 1);
                break;
            }
        }
    }

}

I'd like to sort this array in order to lay it out in "rows", so the data needs to be re-sorted [into this linear representation]. Getting the data in that order would allow me to lay out a table

No, it does not need to be. Actually, that's one step too much, and the order of your intermediate result makes absolutely no sense. What you should do instead is construct a (weekday-) list of (entries-per-day-) lists:

var days = [];
for (var i=0, date=null, day; i<checkin_data.length; i++) {
    var entry = checkin_data[i];
    if (entry.date !== date)
        days.push(day = []);
    day.push(entry);
}

That's it, you have you two-dimensional format now. Well, maybe you will need to transpose it to get it into the table you wanted, but that's not too complicated either:

var header = [],
    table = [header]; // or create a DOM or a HTML string or whatever
for (var i=0; i<days.length; i++)
    header.push(days[i][0].date /* or the weekday name? */);
for (var r=0; !done; r++) {
    var row = [],
        done = true;
    // create cells:
    for (var i=0; i<days.length; i++)
        if (days[i].length > r) {
            row[i] = days[i][r].time;
            done = false;
        } else
            row[i] = "";
    }
    if (!done)
        table.push(row);
}

What you're trying to do is very simple. This is what I would do:

var groups = groupBy(checkin_data, "date");      // groups items based on date
var table = zipAll.apply(null, toArray(groups)); // zips corresponding elements
                                                 // of each group into an array

After this you may create your table as follows:

var header = getHeader(groups), rows = map(table, getRow);
document.body.appendChild(getTable(header, rows));

Of course the actual code would be much bigger (a little more than 100 lines of code) since you need to write the logic for groupBy, toArray, zipAll, map, getHeader, getRow, getTable, etc.

Luckily for you I had the time to go and write all this stuff. Hence you now have a working demo: http://jsfiddle.net/hZFJw/

I would suggest that you browse through my code and try to understand how it works. It's too much to explain in one answer.

Note: My solution may be more than 100 lines of code. However it's still a simple solution because:

1. The actual code which generates the table is just 4 lines long and is very simple to understand.
2. The rest of the code is composed of reusable functions like groupBy, zipAll and map. These functions are very small and simple to understand.
3. Overall by abstracting the program into reusable functions the size of the program has increased. However the complexity of the program has considerably decreased.

You could achieve the same result by tackling the problem in an imperative style like most other answers do. However doing so makes the program harder to understand. Compare my code with other answers and see for yourself.

You can sort array with Alasql JavaScript library.

alasql.fn.WEEKDAY = function(d) {      // User-defined function
    return (new Date(d)).getDay();
};

var res = alasql('SELECT *, WEEKDAY(date) AS dow FROM ? ORDER BY dow', [checkin_data]);

Try this example at jsFiddle.