Question

I have a weird grid with different height columns. By this I mean, column 1 may have 4 squares that need to be filled while column 2 may have 5 and column 3 may have 2. For the purposes of this question assume they are static and the values are as follows:

Col   |  Height
---------------
1         4
2         3
3         5
4         2
5         3

My first ajax call will return an array of items. Each item will have a name and a url.

The function to process the original call will likely look something like this:

var processJSONResult = function (data ) {

  myglob= data.data;
  $.each(data.data, function(i, item){

   url = item.url;
   name = item.name; 

  });
}

So this gets to question one: What is the most efficient way to populate the grid initially. Do I have an html template and then just fill it one by one? Or do I dynamically create the grid and then fill it?

The second part of the question relates to updating. Every so often, the page will initiate an ajax call for new entries. If entries show up, we will need to randomly (or not, but i figure randomly is easier) add them to the grid, replacing one of the old grid entries.

So the second question: What is the best method to go about this taking into account whatever you think is best in part one?

I know this is a doozy of a question, so thanks all who take the time to look at it.

Answer 1

This is actually what I ended up doing

var populateFPTracks = function(data)
{
    currentcounter=0;
    //alert(data.data[1].track);
    for (x=0; x < totalcols; x++)
    {
        var $colheight= Math.floor(Math.random()*6)+1;
        for (y=0; y < $colheight; y++)
        {
            name = data.data[currenttrackcounter].track.name
            url = data.data[currenttrackcounter].track.url
            currenttrackcounter++;
            $("#do_col"+x).append('<div class="do_trackbox"></div>');
        }

    }