Tabellendaten als JSON-Objekt konvertieren

Question

Hallo Ich habe eine Tabelle erstellt, in der wir die Tabellenzeile per Knopfdruck hinzufügen und entfernen können.

Jetzt möchte ich die Tabellendaten als Json-Objekt an den Server senden. könnte mir jemand helfen, indem ich vorstelle, wie man die Tabellendaten als JSON-Objekt konvertiert. Ich habe versucht, auf die folgende Weise, aber es wirkt sich nicht aus.

<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> 

Answer 1

Wenn ich Correclty verstanden, $scope.deliveryDetails ist die JavaScript Objecct Tisch darstellt.

Sie können einfach tun:

$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 intern angular.toJson aufrufen und in JSON-String konvertieren.