AngularJS/Django Post Response Data

Question

I'm using AngularJS for the front-end and Django for the backend of a web app I'm working on. Right now I'm working on logging in users and I'm having a strange problem. Heres the relevant Angular code:

app.factory('AuthService', ["$http", "$q", "Session", "URL", function($http, $q, Session, URL) {
return {

login: function(credentials) {
  var deferred = $q.defer();
  $http.post(URL.login, credentials)
            .then(function(data, status, headers, config) {
              data=data.data; //WHY DOES THIS WORK?
              if (data.success == true) {
                alert("logged in");
                Session.create(credentials.username, data.api_key);
                deferred.resolve();
              }
              else {
                deferred.reject("Login failed!");
              }
            }, function(data, status, headers, config) {
              deferred.reject("Login failed!");
            });
  return deferred.promise
},

And here is the corresponding Django view:

def login_user(request):
    '''
    Given a username and password, returns the users API key.
    '''
    if request.method == 'POST':
        username = request.POST.get('username',None)
        password = request.POST.get('password',None)
        user = authenticate(username=username,password=password)
        if user is not None:
            api_key = ApiKey.objects.get(user=user)
            response_data = {}
            response_data["api_key"] = str(api_key).split(" ")[0]
            response_data["success"] = True
            return HttpResponse(json.dumps(response_data), content_type="application/json")
        else:
            return HttpResponse(json.dumps({"username":username,"success":False}),content_type="application/json")
    return HttpResponseBadRequest()

When the user logs in a POST request is sent and handled by the above Django code. The response is then picked up by the AngularJS code above. As you can see the then() method in the Angular code takes the usual four parameters: data, status, config and headers. I expect to see data contain the dictionary output from the Django code, appropriately serialized into a JSON object.

However what happens is that the only parameter of the then() method which is not undefined is data, and this contains EVERYTHING; headers, data, status code,etc.

The line commented 'WHY DOES THIS WORK' fixes the problem, by accessing the data inside. However, I want to know why this is happening and if there is any way to avoid this. My best guess is that it has something to do with the way Django serializes a response but I'm not sure.

I'm using Django 1.6.5.

I recommended to read this https://thinkster.io/django-angularjs-tutorial — mrvol, Dec 14 '15 at 12:06

score 0 · Accepted Answer · answered Dec 16 '14 at 20:28

That is actually how Angular promises work according to the docs. Here is the relevant quote.

Since the returned value of calling the $http function is a promise, you can also use the then method to register callbacks, and these callbacks will receive a single argument – an object representing the response. See the API signature and type info below for more details.

The emphasis was mine.

AngularJS/Django Post Response Data

1 Answers1