преобразование данных таблицы в объект JSON

Привет я создал таблицу, в которой мы можем добавить и удалить строку таблицы на кнопку нажмите.

Теперь я хочу отправить данные таблицы как объект Json на сервер. может ли кто-нибудь помочь мне, предложив способ преобразования данных таблицы в объект JSON.
Я пытался сделать следующим образом, но это не влияет.

<title>Test</title>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module("createDelivery", []);
app.controller("MyController", ['$scope', '$http', function($scope, $http) {
    $scope.deliveryDetails = [
        {
            'fname1':'Muhammed',
            'fname2':'Muhammed',
            'fname3':'Muhammed',
            'fname4':'Muhammed',
            'fname5':'Muhammed',
            'fname6':'Muhammed',
            'fname7':'Muhammed',
            'fname8':'Muhammed'
        },

        {
            'fname1':'Muhammed',
            'fname2':'Muhammed',
            'fname3':'Muhammed',
            'fname4':'Muhammed',
            'fname5':'Muhammed',
            'fname6':'Muhammed',
            'fname7':'Muhammed',
            'fname8':'Muhammed'
        }];

        $scope.addNew = function(cdDetails){
            $scope.deliveryDetails.push({ 
                'fname1': "", 
                'fname2': "", 
                'fname3': "", 
                'fname4': "", 
                'fname5': "", 
                'fname6': "", 
                'fname7': "", 
                'fname8': ""
            });
        };

        $scope.remove = function(){
            var newDataList=[];
            $scope.selectedAll = false;
            angular.forEach($scope.deliveryDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected);
                }
            }); 
            $scope.deliveryDetails = newDataList;
        };

    $scope.checkAll = function () {
        if (!$scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.deliveryDetails, function(cdDetails) {
            cdDetails.selected = $scope.selectedAll;
        });
    };    
    $scope.getData = function(cdDetails) 
    {
            alert("Check");
            var jsonString;
            jsonString = angular.toJson(cdDetails);
            //JSON.stringify(jsonString);                               
            $http
                ({
                    url: "/scheduler/createDelivery",
                    dataType: 'json',
                    method: 'POST',
                    data: jsonString

                }).success(function(response) {
                    alert("success : : "+jsonString);
                    $scope.value = response;
                }).error(function(error) {
                    alert("error::"+error);
                });

            //window.location.reload();  
            //document.write("nString value "+jsonString);                 
    };  

}]);
</script>

                    <form ng-submit="addNew()">
                        <table class="table table-striped table-bordered">

                                <tr>
                                    <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;border-top-left-radius:15px"><label class="col-md-1 control-label" style="width:100%;text-align: center;">PO#</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">BOL#</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Pick Up Date</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Units</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Quantity</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Weight</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Load Type</label></th>
                                    <th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Commodity Type</label></th>
                                    <th style="background-color: #337ab7;color: white;padding-bottom:4px;border-top-right-radius:15px"><label class="col-md-1 control-label" style="width:100%;">+/-</label></th>
                                </tr>


                                <tr style="background-color: rgba(248, 248, 255, 0.81);" ng-repeat="cdDetails in deliveryDetails">
                                   <td style="border-right: 1px solid white;">
                                        <input type="checkbox" ng-model="cdDetails.selected"/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname1" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname2" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname3" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname4" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname5" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname6" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname7" required/>
                                    </td>
                                    <td style="border-right: 1px solid white;">
                                        <input type="text"  ng-model="cdDetails.fname8" required/>
                                    </td>


                                </tr>

                        </table>

                        <div class="form-group">
                            <input ng-hide="!deliveryDetails.length" type="button"  ng-click="remove()" value="Remove">
                            <input type="submit"  value="Add New">
                             <button type="button" name = "createDelivery"class="col-sm-2 btn btn-primary" style="width:25%" ng-click="getData(cdDetails);">Create Delivery</button>

                        </div>
                    </form>

1 ответ

  1. Если я правильно понял, $scope.deliveryDetailsэто JavaScript Objecct, представляющий вашу таблицу.

    Вы можете просто сделать:

    $http({
      url: "/scheduler/createDelivery",
      dataType: 'json',
      method: 'POST',
      data: $scope.deliveryDetails
    }).success(function(response) {
      alert("success : : " + response);
      $scope.value = response;
    }).error(function(error) {
      alert("error::" + error);
    });
    

    Angular будет внутренне вызывать angular.toJsonи преобразовывать его в строку JSON.