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 *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; } }
With our url , I mean how to parse csv file browsed from our local system
ReplyDeleteDid you get any replies? I'm looking for exact same thing.
DeleteI too need the same
DeleteI need to do same please reply if you get the solution.
Deletecan I convert the datas to json?
ReplyDeletevery easy to follow. thank you!
ReplyDeleteIt works perfectly.
ReplyDeleteIt works perfectly.
ReplyDeleteHave 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
ReplyDeleteI have csv file in which any cell can contain , eg("firstcellvalue", "second,cellvalue", "thirdcell,value").
ReplyDeleteUsing above code I am not able to get rid off.. Please help.
I want to upload the csv file runtime, do not want to set the csv URL.
ReplyDelete
ReplyDeleteHats 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
Great Article
ReplyDeleteFinal Year Projects for CSE in Angularjs
Project Centers in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai
It is not working for angular 5
ReplyDeleteThanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? english speaking lessons
ReplyDeleteAccess to XMLHttpRequest at 'c:\fakepath\blood_data.csv' from origin 'http://localhost:4200' has been blocked by CORS policy:
ReplyDeleteOleh karenanya keringanan dii dunia online begitu menolong anda bermain dengan aman serta memperoleh keuntungan.
ReplyDeleteasikqq
dewaqq
sumoqq
interqq
pionpoker
bandar ceme terpercaya
hobiqq
paito warna
forum prediksi
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.
ReplyDelete98toto
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
ReplyDeleteAi & Artificial Intelligence Course in Chennai
PHP Training in Chennai
Ethical Hacking Course in Chennai Blue Prism Training in Chennai
UiPath Training in Chennai
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
ReplyDeleteNice 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
ReplyDeleteLove 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
I didn't understand this cvs table.
ReplyDeleteDehradun Airhostess Service |
College girls in Dehradun |
Dehradun Hot Girls |
Bhabhi Service in Dehradun |