JS: How to make logic (using loops) to insert data into this table?

Question

Fiddle here. But it does not show anything. I couldn't figure out why.

---

The structure of a 2D array is like:

Array ( [0] => Array ( [0] => Name 1 => Age [2] => CGPA ) 1 => Array ( [0] => Alex 1 => 23 [2] => 2.5 ) [2] => Array ( [0] => Bob 1 => 24 [2] => 3 ) [3] => Array ( [0] => Mike 1 => 22 [2] => 3.9 ) )

We need to load data from this array into a datatable created in a YUI module.

So from the understanding I have got from my efforts, I think we can not write our loops or code inside the YUI module block. (Tell me if I am wrong) Otherwise it was easy, I could simply use for loops.

I still know I need to use for loops here. But I am at a loss at how to create the logic since I can not insert my code into the block of code which is the YUI module. The code is given as follows.

For ease of understanding, I have inserted the data by referring to indices of the given array. It works perfectly fine, but we can not use indices like 0 1 2 3 etc. because we don't know what will be the length of the 2D array and the 1D arrays it contains. So can anybody give me a hand on this?

M.mod_quiz.init_dataTable = function(Y, params) {

    var $rowArray= params.key1;

    alert($rowArray.length);

    /*for (i=0; i<$rowArray.length; i++) {
        for (j=0; j<$rowArray[0].length; j++) {

        }
    }*/

    YUI().use("datatable-sort", function(Y) {
                    var cols = [
                        /*for (i=0; i<$rowArray.length; i++) {
                            {key:"Column "+i , label: $rowArray[0][i] , sortable=true}
                        }*/
                        {key:"Company", label:$rowArray[0][0], sortable:true},
                        {key:"Phone", label:$rowArray[0][1], sortable:true},
                        {key:"Contact", label:$rowArray[0][2], sortable:true}
                    ],
                    data = [
                        {Company:$rowArray[1][0], Phone:$rowArray[1][1], Contact:$rowArray[1][2]},
                        {Company:$rowArray[2][0], Phone:$rowArray[2][1], Contact:$rowArray[2][2]},
                        {Company:$rowArray[3][0], Phone:$rowArray[3][1], Contact:$rowArray[3][2]}
                    ],
                    table = new Y.DataTable({
                        columns: cols,
                        data   : data,
                        summary: "Contacts list",
                        caption: "Table with simple column sorting"
                    }).render(params.key2);
                    });
};

Answer 1

It looks like you want to create a DataTable object, but your requirement is that the named columns property to the constructor must be dynamic, rather than static. Right?

Just because most every YUI example shows the columns property to be an in-line array, doesn't mean that it must be done that way. You can build it dynamically ...

YUI().use("datatable-sort", function(Y) {

            // Build the column definitions dynamically, based on the names in $rowArray[0].
            var cols = [];
            for (i=0; i<$rowArray[0].length; i++) {
                cols.push( { key:$rowArray[0][i], label:$rowArray[0][i], sortable:true } );
            }

            var data = [
                ...

As for the JSFiddle that you provided (Thank You!), there is a mix-up of references to Name/Age/CGPA and Company/Phone/Contact. You need to straighten that out. Even after that, the JSFiddle gets an exception, but I'm out of time. You can use your browser's built-in debugger to catch the exception and debug it.