Search code examples
javascriptangularjscsvpapaparse

Resulting array from PapaParse not filling out ng-repeat


I am trying to upload a csv and then run it thru PapaParse into a JSON. After PapaParse i store it as $scope.dataTable and it logs to the console properly but it doesnt populate my ng-repeat and i cant figure out why.

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

and HTML (i load the angular scripts above)

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

  </div>

contents of JSON from 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": ""
  }
]

Solution

  • After $scope.dataTable = a; Try to add this new Line:

    $scope.$apply();