CSV file contains Comma separated values, records are distinguished by new line. By using split function we can get records easily.
Program Flow
- Get CSV file content using HTTP request
- Process CSV file data
- 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 * <td *{{ 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 * <td *{{ 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; } }
thank you
Great Article
Final Year Projects for CSE in Angularjs
Project Centers in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai
With our url , I mean how to parse csv file browsed from our local system
Did you get any replies? I'm looking for exact same thing.
I too need the same
I need to do same please reply if you get the solution.
can I convert the datas to json?
very easy to follow. thank you!
It works perfectly.
It works perfectly.. excel reporting dashboard
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
great
Angular 5 Resources
| Angular 5 Training in Chennai.
I want to upload the csv file runtime, do not want to set the csv URL.
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
It is not working for angular 5
Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? english speaking lessons
Access to XMLHttpRequest at 'c:\fakepath\blood_data.csv' from origin '' has been blocked by CORS policy: