2017-01-15 28 views
0

我想上传一个csv,然后通过PapaParse运行它到一个JSON中。 PapaParse后,我把它作为$ scope.dataTable存储,它正确地登录到控制台,但它不会填充我的ng-repeat,我无法弄清楚为什么。从PapaParse生成的数组不填写ng重复

var app = angular.module('rainApp', []); 
app.controller('mainCtrl', function($scope) { 
    $scope.dataTable = []; 

    $scope.csv = document.getElementById("file-input"); 

    function buildTable(a) { 
     $scope.dataTable = a; 
     console.log($scope.dataTable); 
    } 

    function dataToJson(data, callback) { 
     Papa.parse(data, { 
      header: false, 
      complete: function(results) { 
       callback(results.data); 
      } 
     }); 
    } 

    $scope.csv.addEventListener("change", function() { 
     data = this.files[0]; 
     dataToJson(data, buildTable); 
    }); 
}); 

和HTML(ⅰ加载上述的角脚本)JSON的

<div ng-controller="mainCtrl"> 
    <input id="file-input" type="file" accept=".csv" /> 
<div ng-repeat="item in dataTable"> 
    <h1>{{item}}</h1> 
</div> 

    </div> 

内容从CONSOLE.LOG

[ 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-01", 
    "Precip. (mm)": "0.8" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-02", 
    "Precip. (mm)": "0.3" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-03", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-04", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-05", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-06", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-07", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-08", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-09", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-10", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-11", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-12", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-13", 
    "Precip. (mm)": "2.3" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-14", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-15", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-16", 
    "Precip. (mm)": "0.0" 
    }, 
    { 
    "Township": "T024R01W5", 
    "Date": "1955-01-17", 
    "Precip. (mm)": "0.8" 
    }, 
    { 
    "Township": "" 
    } 
] 
+0

json格式正确吗?它必须是json数组。你可以在这里粘贴什么,当你console.log datatable – digit

+0

Papaparse不处理JSON,你的代码也没有 - 你有什么是一个JavaScript数组 - 这很好,因为行'$ scope.dataTable = a;'期待一个数组,而不是JSON **字符串** ...所以,重新迭代,这个问题有**没有任何**根据PapaParse文档以任何方式 –

+0

它做的事情是http:这就是说,如果来自PapaParse的results.data只是一个数组,我想我可以弄清楚如何使它成为JSON。 –

回答

1

$ scope.dataTable = A; 尝试添加此新行:

$ scope。$ apply();

+0

谢谢,这工作很好...现在我只是需要深入了解为什么:) –

+1

你知道,当你在视图上绑定某些东西时,会添加一个观察者。当你有异步任务时,你必须通知观察者。例如,在执行$ http,$ timeout..etc的时候,最后有一个$ scope。$ apply()。这意味着在从根范围到所有子范围的事件中的角度比例可以在视图和模型之间同步数据(更新所有观察者)。而且由于使用papa u正在使用框架外的异步,所以您必须明确刷新观察者。 – Sphinx117

+0

啊,这很有道理,我非常感谢回应!谢谢 –