AngularJS: Read Json data from HTML table

Question

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:

 $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?

• lealceldeiro: What would be an example of desired output for $scope.read function?
• aman: @lealceldeiro I am looking for json something around these lines. jsonblob.com/5e55bbf4-86cb-11e8-9b17-7dbb861a6d15 . This json shows I have 2 static columns Id & Comment and 2 dynamic columns (column1, column2) . The rows array shows the row data for those columns.
• lealceldeiro: can't see the json data, share it here as code.
• aman: have updated my post with that
• aman: @lealceldeiro would you be able provide me inputs to the above issue.

Answer 1

I didn't want to overhaul your code, so I just made some small tweaks in your HTML code:

JSFiddle: http://jsfiddle.net/0oerpd5u/

 <tbody>
 <tr ng-repeat="r in targetTable.rows">
 <td class="fixed-width" contenteditable="true" ng-model="r.id"></td>
 <td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!targetTable.rows[$index+1].id? addNewRow(r[column.id], r): ''"></td>
 <td class="comment-fixed-width" contenteditable="true" ng-blur="!targetTable.rows[$index+1].id?addNewRow(r.comment, r):''" ng-model="r.comment">></td>
 <td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
 </tr>
 </tbody>

and in your JS:

 var uniqueIdCounter =1037;
 function createTable() {
 tableCounter++;
 return {
 id: currentTableId++,
 name: `Table ${currentTableId}`,
 columns: [],
 rows: [{id: uniqueIdCounter}],
 uniqueIdCounter: uniqueIdCounter
 }
 }
 $scope.addNewRow = function(value, row) {
 if (tableCounter) {
 if (!value || value === "" || typeof value !== 'string') return;
 $scope.targetTable.rows.push({id :++$scope.targetTable.uniqueIdCounter});
 }
 };

• aman: Well its close but there is an issue. If you see my fiddle: jsfiddle.net/ajnh8bo5/7 and follow these steps. Add tab, add one or more columns, type in ID column row, then as soon as you are done typing in the second column ie column 0, I call the AddRow function to create a new row. Now with your changes this is not working and the new row is not being created. Also would it be possible to add the dynamic column names in the rows array, currently its like "0", "1"
• aman: actually I have resolved the row issue. Changing ng-model="r.id" to ng-model="r.NewId". Just if you can see if there is someway to add columnnames along with the row array so that while parsing I can extract key pair values accordingly.
• Babak: Check my fiddle I solved your row issue and made some changes in your JS, it was inevitable to fix somethings around!
• Babak: Now leaving dynamic columns or comment if there's no previous new row and if the column has some value, new row will be created
• aman: Babak, with your jsfiddle its not creating a new row. Could you pls verify. I mean its not creating new row as it was in my original jsfiddle.