Angular -Js $http.post not working in django

Question

I have just started Django and what I was trying to implement $http.post method of angular to post form data to my Django database,and my further plan was to update the view to display the results without page refresh.so what i thought to post data in django db and then my view function will return a jsonresponse,of that posted data which i can use to update the view using $http.get method.

But the problem is occuring with me is whenever i post data it is not able to post the data and returning an empty json response.

Here is my codes which i am working on:-

urls.py

from django.conf.urls import url
from . import views
app_name='demo'
urlpatterns=[
    url(r'^$',views.index,name="index"),
    url(r'^add_card/$',views.add_card,name="add_card")

]

views.py

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from .forms import CardForm
from .models import Card
# Create your views here.

def add_card(request):
    saved = False
    if request.method == 'POST':
        #print('hi')
        form = CardForm(request.POST)
        #print('hi')
        if form.is_valid():
            #print('hi')
            card = Card()
            #print('hi')
            card.content = form.cleaned_data['content']
            #print('hi')
            saved = True
            card.save()
            #print('hi')
        return JsonResponse({'body':list(q.content for q in Card.objects.order_by('-id')[:15])})

    else:
        return HttpResponse(
            json.dumps({"nothing to see": "this isn't happening"}),
            content_type="application/json"
        )

def index(request):
    return render(request,'demo/index.html',{'form':CardForm()})

controller.js

var nameSpace = angular.module("ajax", ['ngCookies']);

nameSpace.controller("MyFormCtrl", ['$scope', '$http', '$cookies',
function ($scope, $http, $cookies) {
    $http.defaults.headers.post['Content-Type'] = 'application/json';
    // To send the csrf code.
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.get('csrftoken');

    // This function is called when the form is submitted.
    $scope.submit = function ($event) {
        // Prevent page reload.
        $event.preventDefault();
        // Send the data.
        var in_data = jQuery.param({'content': $scope.card.content,'csrfmiddlewaretoken': $cookies.csrftoken});
        $http.post('add_card/', in_data)
          .then(function(json) {
            // Reset the form in case of success.
            console.log(json.data);
            $scope.card = angular.copy({});
        });
    }
 }]);

My models.py:-

from django.db import models

# Create your models here.
class Card(models.Model):
    content = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    def __str__(self):
        return self.content

My forms.py-

from django import forms
from .models import Card

class CardForm(forms.ModelForm):
    class Meta:
        model = Card
        fields = ['content']

You are returning a JsonResponse with {'body': ... } but in you Angular code you are logging json.data. Try replacing body with data to see if you get any response. — dentemm
– dentemm, Commented Apr 18, 2017 at 13:38
If i change data with body the console is printing undefined... actually the json which i get on success response is like this Object {data: Object, status: 200, config: Object, statusText: "OK", headers: function},in which body resides in data part that's why i logged json.data there @dentemm — Vinit Raj
– Vinit Raj, Commented Apr 18, 2017 at 13:50
Ok that's fine But my main problem is that my view.py code is not able to post the data in my database,so my first purpose is to get that data saved then i will think about the json @dentemm,Can You please suggest me some edits in my view.py file that will be a great help thanks. — Vinit Raj
– Vinit Raj, Commented Apr 18, 2017 at 14:01

Community · Accepted Answer · 2017-05-23 12:34:10Z

2

You have some problems in your view.py code.

You need to create a new object in your database from the request data

You need to return the new data as a response

if form.is_valid():
    new_content = form.cleaned_data['content']
    card = Card.objects.create(content=new_content)
    return JsonResponse(
           list(Card.objects.all().order_by('-id').values('content')[:15]),
           safe=False
    )

That should return a list of the content value of your first 15 objects in your Card table after creating a new object in that table by the content provided, IF your form is valid.

Also your CardForm should be defined as follows:

class CardForm(forms.ModelForm):
    class Meta:
        model = Card
        fields = ('content',)

Finally, your $http.post call is asynchronous, which means that when the .then is reached, there is a probability (almost a certainty) that the post request has not been resolved yet, thus your json.data is empty. To solve this problem:
```
$http.post('add_card/', in_data)
    .then((json) => {
        // Reset the form in case of success.
        console.log(json.data);
        $scope.card = angular.copy({});
});
```
A far better read and solutions on the asynchronous-to-synchronous calls are: ES6 Promises - Calling synchronous functions within promise chain, How do you synchronously resolve a chain of es6 promises? and Synchronous or Sequential fetch in Service Worker

Good luck :)

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 18, 2017 at 14:20

John Moutafis

23.3k11 gold badges74 silver badges118 bronze badges

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

8 Comments

Vinit Raj Over a year ago

Sir, I applied the changes but it is still returning an empty json and the the posted data are not being saved @john Moutafis

John Moutafis Over a year ago

Can you provide your Card model from the models.py in your question as an edit?

John Moutafis Over a year ago

I have edited the JsonResponse, and a possible problem in your form, have a look

Vinit Raj Over a year ago

it is giving syntax error for safe=False @john Moutafis and also if i remove it it gives another Typeerror of unhashable list

John Moutafis Over a year ago

My fault, I forgot the {} from the previous edit, I reedited the answer

|

Collectives™ on Stack Overflow

Angular -Js $http.post not working in django

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related