vyshnavi vyshnavi - 3 months ago 15
AngularJS Question

how to post array of data

I want to post the array of data to rest api call in angular js here is my sample code.can you please give suggestions as i am new to angular js.

here is my controller:

$scope.addRowToGrid = function() {
var jsonData = $scope.create;
console.log("create", $scope.create);
var sendDataForCreate = [jsonData.PIDM,
jsonData.phoneCode, jsonData.phoneNumber, jsonData.sequenceNumber, jsonData.comment,
jsonData.areaCode, jsonData.dataOrigin, jsonData.userId
];
service.create(sendDataForCreate).success(
function(response) {});
};


here is my service:

angular.module('ContactApp').factory(
'service', [
'$http', 'Settings',
function($http, Settings) {
return {
create: function(jsonData) {
return $http.post('http://localhost:20080/api/person/phone/v1/jonesl?token=w9cJTKsjhumFoFXzQ5fzw9XQBc', {
"operation": "create",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(
function(response) {
console.log("create", response);
return response.data;
});
}
}
}
]);


html :

<form name="userForm" ng-submit="addRowToGrid()">
<label>phone number</label>
<input type="text" name="pidm"
class="form-control"
ng-model="create.pidm">
<label>phone number</label>
<input type="text" name="areaCode"
class="form-control"
ng-model="create.areaCode">
<label>phone number</label>
<input type="text" name="phoneNumber"
class="form-control"
ng-model="create.phoneNumber">
<label>phone number</label>
<input type="text" name="sequenceNumber"
class="form-control"
ng-model="create.sequenceNumber">
<label>phone number</label>
<input type="text" name="phoneCode"
class="form-control"
ng-model="create.phoneCode">
<label>phone number</label>
<input type="text" name="comment"
class="form-control"
ng-model="create.comment">
<label>phone number</label>
<input type="text" name="dataOrigin"
class="form-control"
ng-model="create.dataOrigin">
<label>phone number</label>
<input type="text" name="userId"
class="form-control"
ng-model="create.userId">
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>

Answer

Your code suggest that you dont wanna send an array to server, you wanna send urlencoded form-data.

Service:

angular.module('ContactApp').factory('service', [
        '$http', '$httpParamSerializerJQLike', 'Settings',
        function ($http, $httpParamSerializerJQLike, Settings) {
            var createUserUrl = 
                "http://localhost:20080/api/person/phone/v1/jonesl?token=blah";
            var CreateUser = function (DTO) {
                //with jQuery dependency
                //var dataToSend = $.param(DTO);
                //without jQuery dependency
                var dataToSend = $httpParamSerializerJQLike(DTO);
                var config = {
                    method: "POST",
                    url: createUserUrl,
                    data: dataToSend,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                };
                return $http(config);
            };
            return {
                CreateUser: CreateUser
            }
        }
]);

Controller:

$scope.addRowToGrid = function () {
    var jsonData = $scope.create;
    service.CreateUser(jsonData).then(function(response){
        //success callback
        var data = response.data;
        //do something with the data
    },function(response){
        //error callback
    });
};

Hope you get the basic idea.

P.S: Do not use .success. Its obsolete.