How to POST data from Angular to Web API in order to send email with same data (no database)

Question

The user adds items -> the model data is pushed to an empty object to create the order. Start with:

$scope.Order = {
    details:{},
    type1: [],
    type2: [],
    type3: [],
};

Then:

$scope.addType1 = function ()
        $scope.Order.type1.push({
            name: $scope.addType1.name,
            price: $scope.addType1.price
        });

Followed by the remaining types.

I added a WebApi project (so now there are two projects), and I created the same Models in the API.

What I need to do: Post data from Angular to the WebAPI so that an email can be sent containing the order data.

I am familiar with the $Http methods in Angular, but I'm not sure how to check if the data has been transferred to the API, and I'm not sure what my API controller needs. I don't have much experience with server-side code, so any help is appreciated.

Also, let me know if you need more information and I can explain further.

 var app = angular.module('myApp', ['ui.bootstrap', 'angularUUID2']);

app.controller('myCtrl', ['$scope', '$http', '$q', 'uuid2', function      ($scope, $http, $q, uuid2) {

$scope.order = {
    details: {},
    type1: [],
    type2: []
    };

    $scope.addOrderDetails = function () {

        $scope.addOrderDetails.orderId = uuid2.newguid();

        $scope.order.details = $scope.addOrderDetails;

        };

    $scope.addType1 = function () {
        $scope.order.type1.push({
            xxx: $scope.addType1.xxx,
            yyy: $scope.addType1.yyy,
            zzz: $scope.addType1.zzz
        });
    };

    $scope.addType2 = function () {
                $scope.order.type2.push({
                    xxx: $scope.addType2.xxx,
                    yyy: $scope.addType2.yyy,
                    zzz: $scope.addType2.zzz
                });
            };

 var deferred = $q.defer();

    var url = 'http://localhost:xxxxxx/api/order';

    var data = $scope.order;


    $scope.submitOrder = function () {
        $http.post(url, data).success(function (response) {
            console.log(response);
            deferred.resolve(response)
        }).error(function (error) {
            console.log(error);
            deferred.reject(error)
        });
        return deferred.promise;   
    };
}]);

Here is the OrderController Post method:

[HttpPost]
    public Order Post([FromBody]Order model)
    {
        return model;
    }

uksz · Accepted Answer · 2015-10-28 19:46:13Z

2

There you have documentation for $http service, which allows to POST and GET.

https://docs.angularjs.org/api/ng/service/$http

So:

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Basically, if the response is a success response (server responds positively), the callback gets executed. The same for failure.

edited Oct 28, 2015 at 19:46

answered Oct 28, 2015 at 19:26

uksz

18.4k31 gold badges102 silver badges172 bronze badges

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

Comments

user2085143 · Accepted Answer · 2015-10-28 19:57:39Z

0

uksz is right!

just wanted to show how you would post your data

var url = your url to post to here e.g 'www.somedomain.com/orders';

var data = put your data object here e.g. $scope.order;  

$http.post(url,data).success(function(response) {
                 console.log(response);
               }).error(function(error) {
                 console.log(error);
               });

You would usually want to implement a promise in this situation, which you can do like so (just make sure you include the $q library in your dependencies

var deferred = $q.defer()

var url = your url to post to here e.g 'www.somedomain.com/orders';

var data = put your data object here e.g. $scope.order;  

$http.post(url,data).success(function(response) {
                 console.log(response);
                 deferred.resolve(response)
               }).error(function(error) {
                 console.log(error);
                 deferred.reject(error)
               });
               return deferred.promise

answered Oct 28, 2015 at 19:57

user2085143

4,2427 gold badges43 silver badges71 bronze badges

4 Comments

B. Krinsky Over a year ago

Thank you, I can now see the array values being posted as Json in the console. However, there is one problem. The 'details' object is null. As you know you can't push to an object only arrays, so I used a function $scope.order.details = $scope.addOrderDetails. You can see the order details in the UI, but on submit they are null. I wrapped the post in a function which is called submitOrder using ng-submit="submitOrder(Order)" and used your code above exactly. Any ideas?

user2085143 Over a year ago

Could you post your code just so I can see exactly what's going on!

user2085143 Over a year ago

Looking at your original code your not placing anything into the details object, which may be why it is returning null.

B. Krinsky Over a year ago

Hey I added the code. I also tried making order.details an empty array and pushing the values to it the same way as type1 and type2. It still showing null for details.

Collectives™ on Stack Overflow

How to POST data from Angular to Web API in order to send email with same data (no database)

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related