CODEWITHSUNDEEP
javascriptpythonangularjsdjango
Damien Verkerk
Damien Verkerk

Reputation: 53

JSON from URL with Angular and django/python

I got a file input and when I select a xlsx file it will be translated to json this works already the only thing is that I want to use the JSON with my Angular.

I got this:

app.js

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}])

.service('fileUpload', ['$http',  function ($http, $scope, response) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){

            angular.json = $scope.json = response.converterfile;
        })

        .error(function(){
            console.log("fail")
        });
    }
}])

.controller('ConverterCtrl', ['$scope', 'fileUpload', function($scope, fileUpload, response){

    $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = 'converterfile/';
        fileUpload.uploadFileToUrl(file, uploadUrl);

    };

}])

I work with partials but that is irrelevant.

converter.html

<form enctype="multipart/form-data" method="POST">
    {% csrf_token %}
    <input type="file" file-model="myFile"/>
    <a class="btn btn-default" href="" ng-click="uploadFile()">upload me</a>


<div ng-controller="ConverterCtrl">
    <table>
        <tr ng-repeat="json in csv">
            <td>{[ json.x ]} </td>

        </tr>
    </table>
</div>

backend is python

views.py

def converterfile(request):
    ''' Als de request methode POST is loop door onderstaande code heen'''
    if request.method == 'POST':           
        filehandle = request.FILES['file']
        sheet = filehandle.get_sheet()
        out = json.dumps( [ row for row in sheet.array ] )
        return HttpResponse(out)
    else:
        return HttpResponse("error")

so i want to get the json from the url with angular.json = $scope.json = response.converterfile;

but it says 

TypeError: Cannot read property 'converterfile' of undefined
at app.js:76
at angular.js:10296
at angular.js:14792
at r.$eval (angular.js:16052)
at r.$digest (angular.js:15870)
at r.$apply (angular.js:16160)
at g (angular.js:10589)
at T (angular.js:10787)
at XMLHttpRequest.w.onload (angular.js:10728)

is there a way to get the json from fileuploadurl and let it work

Upvotes: 2

Views: 617

Answers (1)

Sem
Sem

Reputation: 4669

Firstoff don't confuse front-end errors with back-end code. If something happens in your front-end, the problem is in the front-end code.

The error: Cannot read property 'converterfile' of undefined.

This seems like an undefined error. Which basically means a variable is not defined. And in this case a property is called on something that is not defined.

(FYI, a property is an attribute like name.property).

So we need to search for the converterfile property. Because that's the property that is throwing the error.

.success(function(){
     angular.json = $scope.json = response.converterfile;
})

And there it is, the problem is that response is undefined. So to prevent this error, we need to add the response variable to the response function:

.success(function(response){
     angular.json = $scope.json = response.converterfile;
})

Upvotes: 1

Related Questions