CODEWITHSUNDEEP
pythonjsonangularjspostdjango-rest-framework
Akshay Saxena
Akshay Saxena

Reputation: 33

POST data from Angular.js to Django REST API using JSON

I am using AngularJS along with Python & Django and Django REST API. There is a JSON file created by the REST API and I need to post data into it using Angular $http.post().

I need to know if it is possible or not.

Im majorly getting 403(Forbidden) and 400(BAD REQUEST) errors on post..

$http({
       method: 'POST',
       url: '<JSON FILE URL>',
       data: $scope.tmpDataSet,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}

 }});

This is my .post() method. where im fetching the data from a form made in angular and storing it in 'tmpDataSet'. Its being created properly and im able to store into the array. Im just not able to write it into the JSON file.

The structure of my JSON file is

{
    "count": 6,
    "next": null,
    "previous": null,
    "results": [
        {
            "name": "fff",
            "mobile_no": "fff",
            "email": "[email protected]",
            "message": "dfdf",
            "id": 1
        },
        {
            "name": "asd",
            "mobile_no": "0987654321",
            "email": "[email protected]",
            "message": "no",
            "id": 2
        }
]

If any more code detail is needed please comment.

Upvotes: 2

Views: 2432

Answers (3)

Nikhil Sikka
Nikhil Sikka

Reputation: 108

This issue can be solved by adding CSRF tokens to the angular app and using the regular $http.post() function with all the parameters.

app.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

and,

$http.post('<URL>', item).error(function(data,status,headers,config){
            console.log('COULDNT POST!');
        }).success(function(data, status, headers, config){
            console.log('POSTED!');
        });

Upvotes: 1

soaP
soaP

Reputation: 101

How does the $scope.tmpDataSet look like? Since you have specified a Content-Type for url-encoded

   headers: {'Content-Type': 'application/x-www-form-urlencoded'}

This indicates that the data that is received in your backend is not correct since you probably are passing a js object/array as the body of the request. This would explain the 400 Bad Request that you are getting.

Url Encoded data should be in the form of

Key=Value+One&Key2=Value+Two

Where the + represents whitespace.

If you are using jQuery you can try to use $.param() to convert Java objects to url-encoded strings

Ex

$http({
   method: 'POST',
   url: '<JSON FILE URL>',
   data: $.param($scope.tmpDataSet),
   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 }});

Otherwise try this answer

https://stackoverflow.com/a/24964658/3371851

Upvotes: 0

nick_v1
nick_v1

Reputation: 1664

There is something weird about this statement:

There is a JSON file created by the REST API and I need to post data into it using Angular $http.post().

If you are posting data to Django, you need to have a view and URL routing defined for that view. Something like:

def page(request):
    if request.POST:
          .... do stuff with POST data

Note, that you have to POST data to a view, if there is a simple JSON file on your filesystem, you can't add data by POSTING json to it.

Upvotes: 0

Related Questions