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

Comments

1 Answers

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

I didn't wanted to overhaul your code so I just did 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});
    }
  };

I hope this is helps.

Comments

Add Comment:

Post Your Answers

Existing Members

Sign in to your account
Email Address
Password
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.