title: Javascript/AngularJS :Reading a CSV file and populating data grid on the page
body: <p>Our requirement is reading a csv file and populating data grid dynamically on the page.
  We are using Yeoman to scaffold our project.
  We are facing thoses problems:</p>
  
  <ol>
  <li>We installed <code>angular-ui-grid</code> using <code>npm install -g angular-ui-grid</code>
  But the base application itself did not start after installing <code>angular-ui-grid</code>.</li>
  <li><p>Then we created a new application again using Yeoman and tried to display data with the static grid.</p>
  
  <p>/** Code inside controller**/
  Reading file using FileReader 
  returning the r.readAsArrayBuffer(f); 
  Storing in the $rootScope passing to another controller which will parse data and split based on the ("\n") to get the header row
  then split again based on (",") for the detail row.
  Then add the values to an array .
  Then return the array lines.push(tarr);
  return back to scope data.</p></li>
  </ol>
  
  <p>controller code</p>
  
  <pre><code>$scope.previewDataClick = function(){
     //display the static grid - code to extract all the rows in the csv file
      alert($rootScope.data)
      var allWords =$rootScope.data;
     /* split based on the new line to get each row*/
      var allRows = allWords.split(/\r\n|\n/);
      /* get the header */
      var headers = allRows[0].split(',');
      /** get the lines **/
      var lines = [];
      var data = {};
  
      for ( var i = 0; i &lt; allRows.length; i++) {
          // split content based on comma
          if(headers[i] != undefined){
           data = allRows[i].split(',');
          }
          if (data.length == headers.length) {
              var tarr = [];
              for ( var j = 0; j &lt; headers.length; j++) {
                  tarr.push(data[j]);
              }
              lines.push(tarr);
          }
  
      }
  
  
      // create chunked categories of data-chunkdata from 0 to 9 for length &gt; 0
      $scope.data = lines; //original data source
      var chunkedCategories = [] //push chunked data
      while($scope.data.length &gt; 0)
      chunkedCategories.push($scope.data.splice(0,9))
  
      //reassign it back to $scope.data ???
      $scope.data = chunkedCategories;
      alert('done.click next')
  
  }
  </code></pre>
  
  <p>In my html file :</p>
  
  <pre><code>I am just doing ng-repeat for each x in the data
  ng-repeat y in x {{y}}
  
  *&lt;div id=""&gt;
    &lt;table&gt;
      &lt;tr ng-repeat="x in data track by $index"&gt;
        &lt;td ng-repeat="y in x"&gt;{{ data }}&lt;/td&gt;
      &lt;/tr&gt;`enter code here`
    &lt;/table&gt;`enter code here`
  &lt;/div&gt;*
  </code></pre>
  
  <p>But the data displays as a series of long rows instead of 2 rows with appropriate n columns (in our case based on csv we need to get 10 rows with 10 columns)</p>
  
  <p>Edit:
  <strong>ATop_L,BTop_M,CTop_R,DMiddle_L,EMiddle_M,FMiddle_R,GBottom_L,HBottom_M,IBottom_R,Class
   ax,bx,cx,dx,o1,o2,gx,o3,o4,positive
  The first row is the header(uptil Class, the next is the detail till positive)</strong></p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>What is the entry in the css file we would need to give for that division</li>
  <li>Has it got to do with the versions of the angular components we are using? I am using angular@1.2.30</li>
  <li>How to correctly connect all the dependencies in a package with the appropriate versions it supports?</li>
  </ol>