Question

I got the following function, that loops through all table ths and builds an array based on the selectors values.

The output is a numeric array, containing sub objects as values.

Now .get() allows me to build the array, but I can’t find out how to set this to an associative array.

Question: How would I add the first table cell value as assoc array index?

( function( $ ) 
{
    $.fn.loadTableData = function( selectors )
    {
        var id = $( this ).attr( 'id' );

        /**
         * Get the output array keys from the <thead/tfoot> cell/th #ids
         */
        var columns = $( '#' + id + ' table th' ).map( function($) 
        {
            // This assumes that your headings are suitable to be used as
            // JavaScript object keys. If the headings contain characters 
            // that would be invalid, such as spaces or dashes, you should
            // use a regex here to strip those characters out.
            return jQuery( this ).attr( 'id' );
        } );

        /**
         * Get the cell data, based on the selector object values by index
         * @return row 
         */
        var cell_data = $( '#' + id + ' table tr' ).map( function( index )
        {
            var row = {};

            // Skip empty rows (example: <thead/tfoot>)
            if ( 0 === $( this ).find( 'td' ).length )
                return;

            // Find all of the table cells on this row.
            $( this ).find( 'td' ).each( function( index, value ) 
            {
                // Skip empty keys
                if ( undefined == selectors[ index ] )
                    return;

                // Determine the cell's column name by comparing its index
                // within the row with the columns list we built previously.
                var row_name = columns[ index ];

                // Add a new property to the row object, using this cell's
                // column name as the key and the cell's text as the value.
                if ( 'text' === selectors[ index ] )
                {
                    row[ row_name ] = $( this ).text();
                }
                else
                {
                    row[ row_name ] = $( this ).find( selectors[ index ] ).val();
                }
            } );

            // Finally, return the row's object representation, to be included
            //  in the array that $.map() ultimately returns.
            return row;

            // Don't forget .get() to convert the $ set to a regular array.
        } ).get();

        return cell_data;
    };
} )( jQuery );

Thanks!

Answer 1

The solution wasn’t that hard at the end: Used .each() instead of .map() and then assigned to the output object[ final_index ] instead of using .get().