Cannot pass data to the controller from $http in angularJS

Question

I am creating a simple angularJS application but I am not able to pass data to the APIController. APIController is defined in C# language. When I pass the data with this code-

    var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope, $http) {
        $scope.data = {
            Name: '',
            Username: '',
            Password: '',
            Email: ''
        },
        $scope.saveData = function(data) {
            $http ({
                method: 'POST',
                url: '/api/Account',
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json"
            });
        .success(function (data) {
            $scope.registrationShow = function () {
            return true;
         },
         $scope.status = "Data is saved successfully."
     })
    .error(function(error){
        $scope.status = "Unable to register data." + error.message;
    })
  }})

And HTML code is-

<div data-ng-app="myApp">
   <div data-ng-controller="MyCtrl" >
     <form data-ng-submit="saveData()">
        <table style="margin: 25%; margin-top: 100px">
            <tr>
                <td>Name: </td>
                <td>
                    <input type="text" data-ng-model="data.Name" /></td>
            </tr>
            <tr>
                <td>Username: </td>
                <td>
                    <input type="text" data-ng-model="data.Username" /></td>
            </tr>
            <tr>
                <td>Password: </td>
                <td>
                    <input type="password" data-ng-model="data.Password" id="pass" /></td>
            </tr>
            <tr>
                <td>Confirm Password: </td>
                <td>
                    <input type="password" id="confpass" /></td>
            </tr>
            <tr>
                <td>Email: </td>
                <td>
                    <input type="text" data-ng-model="data.Email" /></td>

            </tr>
            <tr>
                <td colspan="2">
                    <button id="btn" style="margin-left: 300px" type="submit" >Save</button></td>
            </tr>
            <tr>
                <td><label>
        {{status}}
    </label></td>
            </tr>

        </table>
    </form>


</div>

My APIControoler class is-

    public class AccountController : ApiController
{
    Database1Entities db = new Database1Entities();

    [HttpPost]
    public HttpResponseMessage PostData([FromBody]User user)
    {
        if (user == null)
        {
            return new HttpResponseMessage(HttpStatusCode.BadRequest);
        }
        else
        {
            User objUser = new User();
            objUser.Name = user.Name;
            objUser.Username = user.Username;
            objUser.Password = user.Password;
            objUser.Email = user.Email;
            db.Users.Add(objUser);
            db.SaveChanges();
            return new HttpResponseMessage(HttpStatusCode.Created);
        }
    }
}

Only "null" data is passing to the controller. I am not able to find out the actual problem. Please help me as soon as possible.

Jan Barta · Accepted Answer · 2014-07-15 12:38:25Z

1

In your $http call you have semicolon at the end, which throws error on the next line:

$http ({
            method: 'POST',
            url: '/api/Account',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json"
        }); <-------------------------------------
    .success(function (data) {
        $scope.registrationShow = function () {
        return true;
     },

Try to remove it.

And also i believe problem is, that you try to pass data to your save method. You should get it from scope like this:

data: JSON.stringify($scope.data)

answered Jul 15, 2014 at 12:38

Jan Barta

4602 silver badges8 bronze badges

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

2 Comments

Abhinav Over a year ago

Thanks, it really worked for me. Actually JSON.stringify(data) was the error. I replaced it with what you provided to me.. :)

Jan Barta Over a year ago

Glad I could help :) Please mark answer as correct if it was usefull.

sylwester · Accepted Answer · 2014-07-15 12:35:33Z

1

Hi that might happend because you are using jQuery ajax call

In angular way you please see below:

 $scope.saveData = function(data) { 

                 $http.post('/api/Account',data).then(onSucess, onError);

    function onSucess(data){
    ...
    };

    function onError(){
    ...
    }


    };

answered Jul 15, 2014 at 12:35

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

2 Comments

Abhinav Over a year ago

Thanx, this code worked for me as well. And thanx for telling me the short method.. :)

jim tollan Over a year ago

+1 for showing the angular approach, definitely worth noting as errors at framework level (in the case of the OP, jquery) can be hard to diagnose

Pramod · Accepted Answer · 2014-07-15 12:44:00Z

0

Simply replace ".success" with ".then" and add error as .then's second function argument. General usage subtopic in [this][1]

[1]: https://docs.angularjs.org/api/ng/service/$http should help

answered Jul 15, 2014 at 12:44

Pramod

211 silver badge3 bronze badges

1 Comment

Pramod Over a year ago

Jan Barta's answer should help too!

Collectives™ on Stack Overflow

Cannot pass data to the controller from $http in angularJS

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related