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?

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});
    }
  };