Fill datatables js with dynamic columns

Fill datatables js with dynamic columns
0

I’m working with datatables and I want to fill a table with dynamic columns.
The columns will be display according to the “Order” property.
The rows are mapped to the columns by the property “Id_Col” and the “RowIdx” corresponds to the index of the row.
I want to populate the datatable options :“columns” and “data”
My json object is as follows :
{
“Col”: [
{
“Id_Col”: 1,
“Col_Name”: “Col 1”,
“Order”: 1
},
{
“Id_Col”: 2,
“Col_Name”: “Col 2”,
“Order”: 2
},
{
“Id_Col”: 3,
“Col_Name”: “Col 3”,
“Order”: 3
},
{
“Id_Col”: 4,
“Col_Name”: “Col 4”,
“Order”: 4
}
],
“Row”: [
{
“Id_Col”: 1,
“RowIdex”: 1,
“Val”: “Row 1 col 1”
},
{
“Id_Col”: 2,
“RowIdex”: 1,
“Val”: “Row 1 col 2”
},
{
“Id_Col”: 3,
“RowIdex”: 1,
“Val”: “Row 1 col 3”
},
{
“Id_Col”: 4,
“RowIdex”: 1,
“Val”: “Row 1 col 4”
},
{
“Id_Col”: 1,
“RowIdex”: 2,
“Val”: “Row 2 col 1”
},
{
“Id_Col”: 2,
“RowIdex”: 2,
“Val”: “Row 2 col 2”
},
{
“Id_Col”: 3,
“RowIdex”: 2,
“Val”: “Row 2 col 3”
},
{
“Id_Col”: 4,
“RowIdex”: 2,
“Val”: “Row 3 col 4”
},
{
“Id_Col”: 1,
“RowIdex”: 3,
“Val”: “Row 3 col 1”
},
{
“Id_Col”: 2,
“RowIdex”: 3,
“Val”: “Row 3 col 1”
},
{
“Id_Col”: 3,
“RowIdex”: 3,
“Val”: “Row 3 col 2”
},
{
“Id_Col”: 4,
“RowIdex”: 3,
“Val”: “Row 3 col 3”
}
]
}

I created manually an array such as shown bellow and it’s work for data, but I have some problems to create dynamically this object :
var data = [
[“Row 1 - Col 1”, “Row 1 - Col 2”, “Row 1 - Col 3”, “Row 1 - Col 4”],
[“Row 2 - Col 1”, “Row 2 - Col 2”, “Row 2 - Col 3”, “Row 2 - Col 4”],
[“Row 3 - Col 1”, “Row 3 - Col 2”, “Row 3 - Col 3”, “Row 3 - Col 4”]
];

I hope to have your help
Thank you in advance!

https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm
Hope this helps. Good luck.