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

29 comments:

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

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

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

      Delete
  2. can I convert the datas to json?

    ReplyDelete
  3. very easy to follow. thank you!

    ReplyDelete
  4. 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
  5. 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
  6. I want to upload the csv file runtime, do not want to set the csv URL.

    ReplyDelete


  7. 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
  8. It is not working for angular 5

    ReplyDelete
  9. 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
  10. Access to XMLHttpRequest at 'c:\fakepath\blood_data.csv' from origin 'http://localhost:4200' has been blocked by CORS policy:

    ReplyDelete
  11. 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
  12. Im grateful for the blog post.Really thank you!
    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสล็อตออนไลน์ได้ที่นี่ >>> Golden slot
    ร่วมลงทุนสมัครเอเย่น Gclubกับทีมงานของเราได้เลย

    ReplyDelete
  13. 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
  14. 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
  15. The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

    Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.


    Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

    ReplyDelete
  16. 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
  17. I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete
  18. I got this web blog from my buddy who told me concerning this web blog and at the moment this time I am browsing this web page and reading very informative articles here.

    Sbobet1388
    Sbobet Indonesia
    Joker Gaming
    Slot Pulsa XL

    ReplyDelete
  19. Nice post. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part �� I care for such information a lot. I was seeking this certain info for a very long time. Thank you and good luck.

    Slot99

    ReplyDelete
  20. Thank you so much really it s amazing content Thanks for your Hardworking keep it up !

    777slot

    ReplyDelete
  21. "Oh my goodness! Impressive article dude! Thank you, However I am going through difficulties with your RSS. I don’t know the reason why I am unable to join it. Is there anybody else having the same RSS problems?
    Anyone that knows the solution will you kindly respond? Thanks!!"

    Mania 777
    Main Slot
    Mainslot777

    ReplyDelete

Blogroll

Popular Posts