Not getting data from Django rest api to AngularJS

Question

I am new to AngularJS and Djnago Rest Framework . I have created one web api which return list of customers in JSON format. I am getting proper data in RESTClient add-on of mozilla firefox. But i am not able to get data in AngularJS script.

Here i have attached all the codes and error image as below:

views.py (API code)

class CustomerListView(APIView):
    renderer_classes = (JSONRenderer, )

    def post(self, request, format=None):
        content = []
        customer_list = Customer_tbl.objects.all()
        if customer_list:
            for customer in customer_list:
                content.append({ 
                    'first_name': customer.cus_first_name,
                    'last_name': customer.cus_last_name,
                    'email': customer.cus_email,
                    'contact': customer.cus_contact
                    })
        return Response(content)

test.html

<!DOCTYPE html>
<html ng-app="myTestModule">
<head>
    <script src="../scripts/angular.js"></script>
    <script src="../scripts/sample_page_test.js"></script>
    <link href="../css/style_new.css" rel="stylesheet" />-->
</head>
<body> 
    <div ng-controller="customerController">
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Contact</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="customer in customers">
                    <td>{{ customer.first_name }}</td>
                    <td>{{ customer.last_name }}</td>
                    <td>{{ customer.email }}</td>
                    <td>{{ customer.contact }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    ...
    ...
    ...
</body>
</html>

sample_page_test.js

var myTestApp = angular.module("myTestModule", [])
myTestApp.controller("customerController", function ($scope, $http) {
        var url = "http://192.168.1.102:8000/stl_web_app/api/customer_list/";

        $http.post(url).then( function(response) {
           $scope.customers = response.data;
        });
});

Error Image

getting following error in Firebug console

error.png

Do i need to make any changes in settings.py of django application?

So, Can anyone please help me to solve this issue?

Any help would be greatly appreciated.

Thank you.

Answer 1

First of all, are you actually trying to do a POST request? Because from the looks of it, seems that you are trying to return a list of customers. Please use GET request instead of POST to fetch data.

Secondlly, If you are facing Cross-Origin Resource Sharing issue then check if you have passed correctly CSRF-TOKEN along with the POST request.

views.py

class CustomerListView(APIView):
    renderer_classes = (JSONRenderer, )

    def get(self, request, format=None):
        content = []
        customer_list = Customer_tbl.objects.all()
        if customer_list:
            for customer in customer_list:
                content.append({ 
                    'first_name': customer.cus_first_name,
                    'last_name': customer.cus_last_name,
                    'email': customer.cus_email,
                    'contact': customer.cus_contact
                    })
        return Response(content)

sample_page_test.js

var myTestApp = angular.module("myTestModule", [])
myTestApp.controller("customerController", function ($scope, $http) {
var url = "http://192.168.1.102:8000/stl_web_app/api/customer_list/";

        $http.get(url).then( function(response) {
           $scope.customers = response.data;
        });
});

Hope this will help you.

Not getting data from Django rest api to AngularJS

Question

1 answers

solution1
0 2017-05-30 12:28:39

views.py

sample_page_test.js

Not getting data from Django rest api to AngularJS

Question

1 answers

solution1 0 2017-05-30 12:28:39

views.py

sample_page_test.js

solution1
0 2017-05-30 12:28:39