CODEWITHSUNDEEP
angularjs
TAdams79
TAdams79

Reputation: 49

Read & Display CSV File

Details: Trying to read totals.csv file from directory csvFiles and display a single number (which is all the csv file has in it). Not that it matters but the data is a single value for RMA totals created by MSSQL. For instance if the number in the file is 2866 I'd like to display that number on the screen.

What I've Attempted I've tried to use the example below with out results. I replace the .htm file with totals.csv.

<script type="text/javascript">
    Papa.parse("totals.csv", {
    download: true,
    complete: function (results) {
    $scope.results = results.data;
    $scope.fields = results.meta.fields;
    $scope.$apply();
    }
    });
    </script>
<div id="sidebar">
    
    <div id="box1" class="displayBox" ng-app="" >
    <h1>2016 RMA TOTAL</h1>
    <table>
    <tr>
    <th></th>
    </tr>
    <tr ng-repeat='r in results'>
    <td ng-repeat='c in fields'>
    <h3>{{r[c]}}</h3>
    </td>
    </tr>
    </table>
    </div>
    
    <div id="box2" class="displayBox">
    <h1>2017 RMA TOTAL</h1>
    <h3>846</h3>
    </div>
    
    <div id="box3" class="displayBox">
    <h1>2017 CLOSED RMAs </h1>
    <h3>565</h3>
    </div>
    
    <hr>
    <div class="clockContainer">
    <div id="date"></div>
    <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    </ul>
    </div>
    </div>

Upvotes: 1

Views: 2614

Answers (1)

vittore
vittore

Reputation: 17589

Use some library for csv parsing, eg papaparse:

Inside your controller you are downloading file, parsing it and setting scope properties to data and header row (might be different with another library):

Papa.parse("//mysite/totals.csv", {
  download: true,
  complete: function(results) {
    $scope.results = results.data;
    $scope.fields = results.meta.fields;
    $scope.$apply();
  }
});

in your view you just iterate:

<table>
<tr>
  <th ng-repeat='c in fields'>{{ c }}</th>
</tr>
<tr ng-repeat='r in results'>
    <td ng-repeat='c in fields'>
      {{ r[c] }} 
    </td>
</tr>
</table>

Upvotes: 1

Related Questions