In the context of angularjs:
I have a table with 2 fixed columns (ID & Comment) and additional columns that are added dynamically by the user clicking a button. The user can input data into the rows of this table, and I need to extract/ read this data.
Here is a jsfiddle link for reference: http://jsfiddle.net/ajnh8bo5/7/
To add a new column, click on add tab, enter a name, and then click add columns
The javascript function to read the data looks like this:
$scope.read = function() {
return JSON.stringify($scope.targetTable);
};
Currently, the generated JSON only includes information about the dynamically added columns. Sample JSON:
{
"id":0,
"name":"Table 1",
"columns":[
{
"id":0,
"label":"Column 0",
"$$hashKey":"object:11"
}
],
"rows":[
{
"0":"2",
"$$hashKey":"object:9",
"undefined":"1",
"id":1037
}]
The JSON above represents one dynamically added column. In the "rows" array, "0":"2" indicates that the first dynamic column has a value of "2". However, it does not display data for the ID & Comment columns. I'm aware of a missing piece here but unsure about the next steps.
An additional feature, which is currently less essential, is to have the JSON output include column names.
---update---
The desired JSON output is as follows:
{
"columns": [
{
"id": 0,
"label": "ID"
},
{
"id": 1,
"label": "Column 1"
},
{
"id": 2,
"label": "Column 2"
},
{
"id": 4,
"label": "Comment"
}
],
"rows": [
{
"Id": "1",
"Column 1": "2",
"Column 2": "3",
"Comment": "user comment"
}
]
}
The above JSON outlines 2 static columns (ID & Comment) and dynamic columns Column1 & Column2.
If possible, I would like a solution based on the provided JSON structure. Alternatively, guidance on outputting static columns ID & Comment in the JSON would be helpful.
--Updated with relevant code---
Here is the HTML table structure:
<table class="table table-bordered" ng-if="targetTable">
<thead>
<tr>
<th>ID #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<th class="comment-fixed-width" ng-model="comment">Comment</th>
<td class="center add-column fixed-width"><a ng-href ng-click="addColumn()">+ Add Column</a></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width" contenteditable="true" ng-model="r[column.id]"></td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
</table>
AngularJs Code:
function createTable() {
tableCounter++;
return {
id: currentTableId++,
name: `Table ${currentTableId}`,
columns: [],
rows: [{}],
uniqueIdCounter: 1037
}
When creating a new tab, I create a table instance as follows:
$scope.tables.push(createTable());
$scope.tables = [];
$scope.targetTable = null;
//To add a dynamic column, the following code is used.
$scope.addColumn = function() {
if (tableCounter) {
var columns = $scope.targetTable.columns,
id = columns.length;
$scope.targetTable.columns.push({
id: columns.length,
label: `Column ${id}`
});
}
};
//Code snippet for adding a new row
$scope.addNewRow = function(value, row) {
if (tableCounter) {
if (!value || value === "" || typeof value !== 'string') return;
$scope.targetTable.rows.push({});
row.id = $scope.targetTable.uniqueIdCounter++;
}
};
Any valuable inputs? Please share.