Read CSV Data Using Angular 2

Friday 14 October 2016 | Posted by
CSV file contains Comma separated values, records are distinguished by new line. By using split function we can get records easily.
Source Code        DEMO

Program Flow

  1. Get CSV file content using HTTP request
  2. Process CSV file data
  3. Format JavaScript object and display it in a table

Markup to display CSV content in Table

The below markup shows csvData in table view
<table border="1" class="demoTable">
   <tr *ngFor="let x of csvData">
      <td *ngFor="let y of x">{{ y }}</td>
   </tr>
</table>

Script - app.component.ts

Observe readCsvData and extractData functions. readCsvData functions sends GET request to server for CSV data, Once it got CSV data,  It will call extractData function, which will convert CSV data to two dimensional array.
import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
  <h2>CSV Data</h2>
  <div>
    <button class="btn btn1 btn2" (click)="readCsvData()">
       Read CSV Data
    </button>
  </div>
  <br/><br/>
  <div>
    <table border="1" class="demoTable">
      <tr *ngFor="let x of csvData">
        <td *ngFor="let y of x">{{ y }}</td>
      </tr>
    </table>
  </div>
  `
})
export class AppComponent {
  csvUrl: string = 'sample.csv';  // URL to web API
  csvData: any[] = [];

  constructor (private http: Http) {}

  readCsvData () {
    this.http.get(this.csvUrl)
    .subscribe(
      data => this.extractData(data),
      err => this.handleError(err)
    );
  }

  private extractData(res: Response) {

    let csvData = res['_body'] || '';
    let allTextLines = csvData.split(/\r\n|\n/);
    let headers = allTextLines[0].split(',');
    let lines = [];

    for ( let i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        let data = allTextLines[i].split(',');
        if (data.length == headers.length) {
            let tarr = [];
            for ( let j = 0; j < headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    this.csvData = lines;
  }

  private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return errMsg;
  }
}
Labels:

22 comments:

  1. Sid1 February 2017 at 00:51

    With our url , I mean how to parse csv file browsed from our local system

    ReplyDelete
    Replies
    1. Unknown11 April 2017 at 21:34

      Did you get any replies? I'm looking for exact same thing.

      Delete
    2. Unknown26 September 2017 at 02:33

      I too need the same

      Delete
    3. Unknown25 May 2018 at 05:56

      I need to do same please reply if you get the solution.

      Delete
  2. sadiqpang23 February 2017 at 21:55

    can I convert the datas to json?

    ReplyDelete
  3. Tyler Lindell5 April 2017 at 15:40

    very easy to follow. thank you!

    ReplyDelete
  4. Aneri Vala6 October 2017 at 04:12

    It works perfectly.

    ReplyDelete
  5. Aneri Vala6 October 2017 at 04:12

    It works perfectly.

    ReplyDelete
  6. Steve R7 October 2017 at 01:27

    Have you had the following experience when combining a folder full of CSV files? Open a file, hit control A, hit control C, switch windows to the master file, find the point where you left off, hit control v, go back to the original file, close that file, select "no" when asked if you want to save the changes you made, locate the file in windows explorer, delete the file. excel reporting dashboard

    ReplyDelete
  7. Unknown4 January 2018 at 09:48

    I have csv file in which any cell can contain , eg("firstcellvalue", "second,cellvalue", "thirdcell,value").
    Using above code I am not able to get rid off.. Please help.

    ReplyDelete
  8. Unknown25 May 2018 at 05:54

    I want to upload the csv file runtime, do not want to set the csv URL.

    ReplyDelete
  9. sriram24 June 2018 at 21:57



    Hats off to your presence of mind..I really enjoyed reading your blog. I really appreciate your information which you shared with us.
    Php course in chennai

    ReplyDelete
  10. Nannie Co Pam7 December 2018 at 03:22

    Great Article
    Final Year Projects for CSE in Angularjs
    Project Centers in Chennai


    JavaScript Training in Chennai
    JavaScript Training in Chennai

    ReplyDelete
  11. Unknown30 January 2019 at 23:46

    It is not working for angular 5

    ReplyDelete
  12. Matias3 May 2019 at 16:31

    Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? english speaking lessons

    ReplyDelete
  13. Anonymous13 May 2019 at 05:19

    Access to XMLHttpRequest at 'c:\fakepath\blood_data.csv' from origin 'http://localhost:4200' has been blocked by CORS policy:

    ReplyDelete
  14. Merlin Kristianti30 June 2019 at 13:50

    Oleh karenanya keringanan dii dunia online begitu menolong anda bermain dengan aman serta memperoleh keuntungan.
    asikqq
    dewaqq
    sumoqq
    interqq
    pionpoker
    bandar ceme terpercaya
    hobiqq
    paito warna
    forum prediksi

    ReplyDelete
  15. Gaius Guild14 February 2020 at 13:16

    Ini berarti kontrol yang lebih baik dan tidak ada pengeluaran berlebihan bahkan jika Anda ingin berjudi online. Semua dalam semua kartu prabayar merupakan bentuk pembayaran dan kontrol alternatif yang sangat baik untuk penjudi online.
    98toto

    ReplyDelete
  16. subha9 June 2020 at 21:00

    Just pure brilliance from you here. I have never expected something less than this from you and you have not disappointed me at all. keep it up
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  17. Mike Johnson23 November 2020 at 06:44

    Nice post! I see you know so much about csv data. If you create youtube channel about it, I advise you to get youtube subscribers from this site https://soclikes.com/. There you can get real subscribers

    ReplyDelete
  18. love back Solution23 February 2021 at 02:48

    Nice information. Thanks for sharing this informative blog with us. I really need this type of blog and I’m so lucky to found this. also visit

    Love back Solution Specialist
    Vashikaran specialist  
    Love Vashikaran Specialist
    Vashikaran Specialist in India  Vashikaran Specialist in Bangalore  Vashikaran Specialist in Mumbai  Love Vashikaran Specialist in MumbaiBlack magic specialist astrologer 

    ReplyDelete
  19. parul sharma26 April 2022 at 05:35

    I didn't understand this cvs table.

    Dehradun Airhostess Service |
    College girls in Dehradun |
    Dehradun Hot Girls |
    Bhabhi Service in Dehradun |

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts