AngularJS: Read Json data from HTML tableAsk Questions

 Posted on 07/14/2018

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:

Click on add tab, give a name, and then click add columns

Reading json as:

  $ = function() {
    return JSON.stringify($scope.targetTable);

Currently my generated json just gives information about the dynamic columns that was added. See json below:

    "name":"Table 1",
    "label":"Column 0",

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.


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"
Share On: facebook gplus twitter
Asked by ketan Linbachiya on 07/14/2018 Score: 269 points
Add Comment:


1 Answers

0 Corrected Answers
Aproved Answers
Answered by hardik chaudhary on 8/14/2018 8:02:09 AM Score: 557 points

I didn't wanted to overhaul your code so I just did some small tweaks in your HTML code:


         <tr ng-repeat="r in targetTable.rows">
            <td class="fixed-width" contenteditable="true" ng-model=""></td>
            <td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[]" ng-blur="!targetTable.rows[$index+1].id? addNewRow(r[], 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[]"></td>
and in your JS:

 var uniqueIdCounter =1037;
  function createTable() {
    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});

I hope this is helps.


Add Comment:

Post Your Answers

Existing Members

Sign in to your account
Email Address
New Member?
Sign up and complete profile
Full Name
Email Address
I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the StoodQ newsletters
Guideline to answer a question:

Useful tips to submit your answer
Please read below guidelines before you submit your answer for question.

  • Read and understand question for which you are submitting your answer.
  • Try to avoid grammatical and spell mistake while answering.
  • Do not post any irrelevant information in your answer.
  • Explain your answer with example or any reference link to help who posted question.
  • If you find irrelevant question, please report it to support. Click here to contact support.
  • You agree to the privacy policy and terms of use to submit any contents.

Note: StoodQ is online developers community which helps developer for their difficulty, lets help them with your value contribution.