Why I have to send params as an object in $http angular?

Question

I'm making CRUD and if I want to send some data to my backend (node.js) then I receive an error: angular.js:10765 POST http://localhost:1234/shop/removeProduct/574bf938b16158b40f9c87bc 400 (Bad Request)

script:

$scope.removeProduct = function (partnerId, productId) { $http.post("/campaign/removeProduct/" + partnerId, productId); }

The solution is just simply pack this parameter (productId) in an object like this:

$scope.removeProduct = function (partnerId, productId) { $scope.productData = {productId: productId}; $http.post("/campaign/removeProduct/" + partnerId, $scope.productData); }

But why I have to do this like this? By the way, is this correct or should I do it in a different way?

@EDIT One more thing, how should i refresh data after I added/removed any object? Is this correct?

$scope.addPartner = function(data) { $http({method: 'POST', url: addPartner, data}) .then(function(response) { console.log(response); }); $scope.loadPartnersData(); window.alert("Partner added!"); }; $scope.loadPartnersData = function () { $http.get("/campaign/partner-list").then(function(result) { $scope.partnerList = result.data.partnerList; }); };

backend:

router.get('/partner-list', function (req, res) { Partner.find({}, function (err, partnerList) { if (err) throw err; res.json({ partnerList: partnerList }); }); });

Why does your server code need id both in url and in payload? Can your backend use DELETE verb w/o payload to perform delete? — Yury Tarabanko
– Yury Tarabanko, Commented May 31, 2016 at 7:40

thepio · Accepted Answer · 2016-05-31 07:46:15Z

1

I'm assuming you want the url to be something like /shop/removeProduct/34523543?productData=5325345. If so then I would use the angular way of declaring $http request:

var url = '/shop/removeProduct/' + partnerId; /* How ever you declare this */ $scope.removeProduct = function() { $http({method: 'POST', url, params:{'productData': productId}}) .then(function(response) { console.log(response); }); }; $scope.removeProduct();

Angular then takes care of the decoding of the parameters

answered May 31, 2016 at 7:46

thepio

6,2635 gold badges38 silver badges55 bronze badges

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

10 Comments

DiPix Over a year ago

Thank you. One more question. As i said before it's CRUD. In this case i want to remove some Product from Array in Partner Document. That's why i need to send partnerId and productId. At the moment I send partnerId in URL '/shop/removeProduct/' + partnerId; but is it correct? Maybe should I send partnerId and productId like this $http({method: 'POST', url, params:{'partnerData': partnertId, 'productData': productId}})

thepio Over a year ago

Well, I can't really tell you what your back-end is like. If it's CRUD it should be $http({method: 'DELETE', url, params:{'partnerData': partnertId, 'productData': productId}}) or similar.

DiPix Over a year ago

I can always change backend :)

DiPix Over a year ago

Why it has to be var url in $http({method: 'DELETE', url, params:{'productData': productId}}). I tried var urlRemoveProduct and i receive an error: Cannot read property 'indexOf' of undefined

thepio Over a year ago

It does not have to be. I just use it normally like that. You can have it straight like: $http({method: 'DELETE', '/campaign/removeProduct/', params:{'productData': productId}})

|

hansmaad · Accepted Answer · 2016-05-31 07:59:23Z

You should set the Content-Type header to text/plain if you send text:

$scope.removeProduct = function (partnerId, productId) { var config = { headers: { "Content-Type": "text/plain" }}; $http.post("/campaign/removeProduct/" + partnerId, productId, config); }

This shoudl work, if your node route handler accepts text/plain content. (If you're using body-parser, make sure to add app.use(bodyParser.text());

In this particular case, it seems to make more sense to send a DELETE request to the resource uri like this:

$scope.removeProduct = function (partnerId, productId) { $http.delete("/campaign/partners/" + partnerId + '/products/' + productId); }

And let your backend handle this like:

app.get('/campaign/partners/:partner/products/:product', function(req, res){ myAwesomeDB.remove(req.params.product).then(/*...*/); });

Collectives™ on Stack Overflow

Why I have to send params as an object in $http angular?

2 Answers 2

10 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Related