Read local csv file in Angular2

Reading local csv file in Angular2.


Read local csv file in Angular2 with example. upload .csv file in javascript. Display CSV or text file using JavaScript, JQuery, Bootstrap and Angular2.


We will Read, Parse and Display .csv file records in Angular2.



 Lets start with sample application that read local .csv file.

STEP 1: Download the sample application from here

STEP 2: Steps to start the Application
  1. run command "npm install".
    This step will download dependencies and it may take some time to dowload all dependencies.
  2. run command "npm run server"
    This step will start the server at port 8080.
STEP 3: After server starts, open the application by hitting "http://localhost:8080/" in browser.

STEP 4: Application will get started and you can browse the sample csv present along with bundle.

Screen will look like below,

Note: In this sample application, we are simply displaying the contents of uploaded csv file, If required you can send the csv data to backend server.

Explanation

test.component.html
            

         <input type="file" 
                #fileImportInput
                name="File Upload" 
                id="txtFileUpload" 
                class="btn btn-primary" 
                (change)="fileChangeListener($event)" 
                accept=".csv"/>


test.component.ts
  //THIS METHOD WILL BE CALLED WHEN CSV FILE IS IMPORTED
  fileChangeListener($event): void {

    var text = [];
    var files = $event.srcElement.files;

    if (this._fileUtil.isCSVFile(files[0])) {
      var input = $event.target;
      var reader = new FileReader();
      reader.readAsText(input.files[0]);

      reader.onload = (data) => {
        let csvData = reader.result;
        let csvRecordsArray = csvData.split(/\r\n|\n/);

        let headersRow = this._fileUtil
            .getHeaderArray(csvRecordsArray);
        
        this.csvRecords = this._fileUtil
            .getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
      }

      reader.onerror = function () {
        alert('Unable to read ' + input.files[0]);
      };

    } else {
      alert("Please import valid .csv file.");
      this.fileReset();
    }
  };


file.util.ts

    getHeaderArray(csvRecordsArr) {
        let headers = csvRecordsArr[0].split(';');
        let headerArray = [];
        for (let j = 0; j < headers.length; j++) {
            headerArray.push(headers[j]);
        }
        return headerArray;
    }

    getDataRecordsArrayFromCSVFile(csvRecordsArray, headerLength) {
        var dataArr = []

        for (let i = 0; i < csvRecordsArray.length; i++) {
            let data = csvRecordsArray[i].split(';');
            
            if (data.length == headerLength) {
                let col = [];

                for (let j = 0; j < data.length; j++) {
                    col.push(data[j]);
                }

                dataArr.push(col);
            }else{
                return null;
            }
        }   
        return dataArr;
    }


You may also like to see


Download binary file AngularJS + REST service

Enjoy !!!! 

If you find any issue in post or face any error while implementing, Please comment.

Post a Comment