Using angularjs here:
I am creating a table which has 2 static columns (ID & Comment) and rest columns are dynamically created by clicking a button. User can enter data in the rows of this table. I want to read/extract the data from the table that the user has entered.
I have created a jsfiddle at: http://jsfiddle.net/ajnh8bo5/7/
Click on add tab, give a name, and then click add columns
Reading json as:
Another thing which is less important at this moment is also the json to spit out the column name as well.
---updated---
Adding desired output:
If anyone cant provide me any solution based on the above JSON. Can anyone just let me know how can I just output static columns ID & Comment in my json.
--Updated with relevant code---
Below is the HTML table:
from AngularJS: Read Json data from HTML table
I am creating a table which has 2 static columns (ID & Comment) and rest columns are dynamically created by clicking a button. User can enter data in the rows of this table. I want to read/extract the data from the table that the user has entered.
I have created a jsfiddle at: http://jsfiddle.net/ajnh8bo5/7/
Click on add tab, give a name, and then click add columns
Reading json as:
$scope.read = function() {
return JSON.stringify($scope.targetTable);
};
Currently my generated json just gives information about the dynamic columns that was added. See json below: {
"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 above json is generated when I add just one dynamic columns. Here under rows array "0":"2" means that the first dynamic column has a value of "2". But it does not shows the data that was entered for ID & Comment column. I know I am missing something here but not sure how to proceed.Another thing which is less important at this moment is also the json to spit out the column name as well.
---updated---
Adding desired output:
{
"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 shows I have 2 static columns Id & Comment. Column1 & Column2 are the dynamic ones.If anyone cant provide me any solution based on the above JSON. Can anyone just let me know how can I just output static columns ID & Comment in my json.
--Updated with relevant code---
Below is the HTML table:
<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
}
While creating a new tab I am creating an instance of table as: $scope.tables.push(createTable());
$scope.tables = [];
$scope.targetTable = null;
//When I click add dynamic column button I use the below code.
$scope.addColumn = function() {
if (tableCounter) {
var columns = $scope.targetTable.columns,
id = columns.length;
$scope.targetTable.columns.push({
id: columns.length,
label: `Column ${id}`
});
}
};
//Below code is 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++;
}
};
Anyone with inputs?from AngularJS: Read Json data from HTML table
No comments:
Post a Comment