How to generate JSON from table using AngularJs for saving tabular data?

Question

I have create one HTML with the help of AngularJS.

<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() -->
    <input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;">

    <div class="category-placer2" style="width:100%">
      <div class="category-header-keywords">
        <div class="icon-add"><a href="#"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></a></div>
        <div class="category-header-text" ><span ng-bind="dispName"></span></div>
      </div>
      <div class="category-base">
        <div class="keywordplacer">

            <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList">
                <tr>                
                    <th width="60%" colspan="2">Code Master Name</th>
                    <th width="30%" colspan="2">Status</th>
                </tr>
                <tr ng-repeat="type in codeMasterList">
                    <td width="1%" class="">
                        <input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" />
                    </td>
                    <td width="60%" class="">
                        <input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" >
                    </td>
                    <td width="30%" class="">
                        <input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active
                        <input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive
                    </td>
                </tr>
            </table>

        </div>
        <center>
            <hr style=" background-color: #ABBFC6; height: 2px; width: 90%;">
            <input type="submit" value="Save" class="myButton" style="margin: 0px;"/>
        </center>
        <!-- <div class="table-index">P - Primary</div> -->
      </div>
    </div>
</form>

It will show value in editable mode.

I want to save all the list at a single click on save button. how can i do such thing using angularjs ?

Can you please help me to generate JSON data for the name as well as for radio button value ?

below is my controller:

keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService',
    function($scope, $http, keywordService) {
        $scope.createAllKeywordsJSON = function() {
            //alert($scope.codeMasterList.codeMasterId);
            var tempItemList = [];
            angular.foreach($scope.codeMasterList,function(item,index){
                tempItemList.push(item);
            });
            alert(tempItemList);
            /*keywordService.createAllKeywordsJSON().query(codeMasterList,
                    //Success Handler handler
                    function(data) {

                    },
                    //Failure handler
                    function(error) {

                    }
            );*/
            //alert(codeMasterList);
        };
    }
]);

Malkus · Accepted Answer · 2014-09-03 11:23:24Z

3

$scope.codeMasterList would be the JSON data for your list.

You can update the value of the form fields by using ng-model instead of value. This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList

HTML Sample

<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" >

Working Fiddle

edited Sep 3, 2014 at 11:23

answered Sep 2, 2014 at 13:05

Malkus

3,7262 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Krunal Shah Over a year ago

Thanks for the answer, but I want to pass that latest {{ mylist }} to the controller, so that I can pass it to the service and save it through hibernate so can you please help me to pass that to controller after submitting the form? you can help me to jsfiddle.net/L78kfkx8/3

Malkus Over a year ago

this is what I would do, you do not need to pass a reference to get the list to the controller.

Malkus Over a year ago

If you want to strip the angular ng-repeat $$hashkey then do an angular.copy($scope.myList)

Krunal Shah Over a year ago

its working fine in JSFiddle, but when I am trying same into real code , its shows me error ": angular.foreach is not a function", can you please help me?

Malkus Over a year ago

I'm not sure why you changed my fiddle, you do not need the angular.forEach() I updated the fiddle again please take a look, you are adding a lot of extra code to the ng-checked and $scope.ok functions you do not need.

Collectives™ on Stack Overflow

How to generate JSON from table using AngularJs for saving tabular data?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related