2017-01-15 61 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

啊,這很有道理,我非常感謝迴應!謝謝 –