HTML table data to javascript array

Question

I have a html table to show images displayed on my site in a carousel. The images have a position in which they are displayed and this is shown in the table. One of the features of this table is that it uses the jQuery .sortable() function. If an image is moved to the top of the table, the position of that image is changed to 0 and the subsequent positions are altered. This is all working fine and I am able to capture the position in a variable. However, what I now need to do is jQuery POST the data in the table, so I can update the fields in my database with the new positions any any other information that has been updated.

Ideally I need to be able to post an javascript associative array with the ID of the image as the key, and then the image information such as position and location in the sub array.

if it where php I imagine it would look something like this.

Array
(
    [45] => Array
        (
            [name] => Image 45
            [location] => img/Banner-45.jpg
            [url] => http://www.exampleurl2.com
            [position] => 0
        )

    [56] => Array
        (
            [name] => Image 56
            [location] => img/Image-56.jpg
            [url] => http://www.exampleurl2.com
            [position] => 1
        )

)

which I could loop through and update the values in the table. All my attempts to create an array with this similar format in javascript/jquery have failed so far.

I have this loop which captures the details in jQuery

 $("#banners tbody tr").each(function () {
        var id = $('td:first', $(this)).text();
        var name = $('td:nth(1)', $(this)).text();
        var pos = $('td:nth(2)', $(this)).text();
        var url = $('td:nth(3)', $(this)).text();
        var loc = $('td:nth(5)', $(this)).text();


});

I understand that this is not the most efficient method of capturing the data from the tables but I am relatively new to jQuery. Now I need to insert these into some form of associative array with the ID as the key within the loop. Any pointers in the right direction or a more effective method would be greatly appreciated.

Answer 1

You can use jquery map function to traverse all <tr>'s from the table and create data for rows, then traverse all <td>'s inside the current <tr> for the column data :

var data = [];
var headers = [];
var tb = $('table.table');
var thead = tb.find('thead');
var tbody = tb.find('tbody');
thead.find('th').map(function(i,el){
   var $el = $(el);
   headers.push($el.attr('class'));
});
tbody.find('tr').map(function(i,el){
    var $el = $(el);
    var row = {};
    $el.find('td').map(function(i,el){
       var col = $(el).text();
       row[headers[i]] = col;
    });
    data.push(row);
});

sample jsfiddle : http://jsfiddle.net/v6ZLj/1/

Answer 2

There are no associate arrays in JavaScript so to speak. In JavaScript arrays are one dimensional, you retrieve items based on their index within the array. You are talking about objects or object literals. I've coded an example and example structure for you below.

var saveObj = {}; //Setup a blank object for the data;

$("#banners tbody tr").each(function () {

   var id = $('td:first', $(this)).text();

   saveObj[id] = {
        name : $('td:nth(1)', $(this)).text(),
        pos : $('td:nth(2)', $(this)).text(),
        url : $('td:nth(3)', $(this)).text(),
        loc : $('td:nth(5)', $(this)).text()
    };
});

This sets up a blank object literal first called saveObj. This is your blank canvas so to speak. Then within your loop you are grabbing the id as normal. This will be your key within the object and the value for the key will be another object literal which we create dynamically within the loop. using the same keys as your variables (name, pos, url, loc) with their data values in the same way you are grabbing them now. Your structure will be like this

var saveObj = {
    "12" : {
       name : "YourName",
       pos : "YourPos",
       url : "YourUrl",
       loc : "YourLoc"
    },
    "16" : {
       name : "YourName2",
       pos : "YourPos2",
       url : "YourUrl2",
       loc : "YourLoc2"
    }
};