how to post array of data

Question

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>

Possible duplicate of Pass array of data from Angular $http POST — Mike Cheel
– Mike Cheel, Commented Jun 21, 2016 at 19:12
i have used the solution over there but i am getting the errors like angular.js:13708 TypeError: Cannot read property 'name' of undefined at jquery.js:8236 at Function.jQuery.extend.each (jquery.js:359) at Function.jQuery.param (jquery.js:8235) at Object.create (ContactService.js:16) at Scope.$scope.addRowToGrid (StudentController.js:42) at fn (eval at <anonymous> (angular.js:14605), <anonymous>:4:227) at expensiveCheckFn (angular.js:15694) at callback (angular.js:25622) at Scope.$eval (angular.js:17444) at Scope.$apply @MikeCheel — vyshnavi
– vyshnavi, Commented Jun 21, 2016 at 19:51
please do not erase your question and its answer. its against site rules — codeandcloud
– codeandcloud, Commented Aug 11, 2016 at 17:58

codeandcloud · Accepted Answer · 2016-06-21 20:13:18Z

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.

Collectives™ on Stack Overflow

how to post array of data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related