来自 Angular 和 django/python 的 URL 的 JSON答案

【问题标题】：JSON from URL with Angular and django/python来自 Angular 和 django/python 的 URL 的 JSON
【发布时间】：2016-05-10 00:03:17
【问题描述】：

我有一个文件输入，当我选择一个xlsx 文件时，它将被转换为 json，这已经有效，唯一的事情是我想将 JSON 与我的 Angular 一起使用。

我知道了：

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);

    };

}])

我使用局部变量，但这无关紧要。

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>

后端是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")

所以我想从 url 中获取 json angular.json = $scope.json = response.converterfile;

但它说

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)

有没有办法从 fileuploadurl 获取 json 并让它工作

【问题讨论】：

标签： javascript python angularjs django

【解决方案1】：

首先不要将前端错误与后端代码混淆。如果您的前端出现问题，则问题出在前端代码中。

错误：Cannot read property 'converterfile' of undefined.

这似乎是一个undefined 错误。这基本上意味着未定义变量。在这种情况下，会在未定义的东西上调用属性。

（仅供参考，属性是name.property 之类的属性）。

所以我们需要搜索converterfile 属性。因为这是引发错误的属性。

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

就是这样，问题是响应未定义。所以为了防止这个错误，我们需要在响应函数中添加response变量：

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

【讨论】：