How to Read Data from *.Csv File Using JavaScript

How to read data From *.CSV file using JavaScript?

NOTE: I concocted this solution before I was reminded about all the "special cases" that can occur in a valid CSV file, like escaped quotes. I'm leaving my answer for those who want something quick and dirty, but I recommend Evan's answer for accuracy.

This code will work when your data.txt file is one long string of comma-separated entries, with no newlines:

data.txt:

 heading1,heading2,heading3,heading4,heading5,value1_1,...,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}

The following code will work on a "true" CSV file with linebreaks between each set of records:

data.txt:

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}

http://jsfiddle.net/mblase75/dcqxr/

how to read datasets from a csv file and use it in the chart.js but only reading the values with a certain timestamp onwards?

Copied your data in a github repository to get rid of the CORS Problem.

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "https://raw.githubusercontent.com/bmehler/mycsv/main/test.csv",
        dataType: "text",
        success: function(data) {
           processData(data);
        }
    })

    function processData(allText) {
        var allTextLines = allText.split(/\r\n|\n/);
        console.log('allTextLines', allTextLines);
        var length =  allTextLines.length;
        var splitted;
        var dataString = '';
        dataString += '[';
        for(var i = 0; i < length; i++) {
            splitted = allTextLines[i].split(/,/);
            console.log('splitted-' + i, splitted);
            $.each(splitted, function(key, value) {
                if(key == 5) {
                    console.log('test', value);
                    dataString += value + ',';
                }    
            });
        }
        dataString += ']';
        var replaced = dataString.replace(",]", "]");
        console.log('dataString', replaced);
    }
});

console.log: dataString [44,12,15,42,472,471,4761,411]

Reading in a local csv file in javascript?

Here is how to use the readAsBinaryString() from the FileReader API to load a local file.

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

Basically, just need to listen to change event in <input type="file"> and call the readFile function.

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);

jsFiddle

Reading CSV file in to an array using javascript

Here is sample code for reading csv file into array

var request = new XMLHttpRequest();  
request.open("GET", url, false);   
request.send(null);  

var csvData = new Array();
var jsonObject = request.responseText.split(/\r?\n|\r/);
for (var i = 0; i < jsonObject.length; i++) {
  csvData.push(jsonObject[i].split(','));
}
// Retrived data from csv file content
console.log(csvData);

Here is the working fiddle example: http://jsfiddle.net/BdCnm/450/

read data from csv file in javascript

Does this work for you?
Select the csv file with the button and the script will display it on the page.

index.html:

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #earth_div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute !important;
        }
        #files {
            top: 0;
            left: 0;
            position: absolute;
            z-index: 999;
        }
    </style>
    <title>WebGL Earth API: Markers</title>
</head>
<body>
    <input type="file" id="files" name="file" />
    <div id="earth_div"></div>
    <script>
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);
        var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
        earth.setView([0, 0], 3);
        document.getElementById('files').onchange = function() {
            readFile();
        };
        function readFile() {
            var files = document.getElementById('files').files;
            if (!files.length) {
              alert('Please select a file!');
              return;
            }
            var file = files[0];
            var start = 0;
            var stop = file.size - 1;
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                if (evt.target.readyState == FileReader.DONE) {
                    var text = evt.target.result;
                    var lines = text.split('\n');
                    for (var i = 0; i < lines.length; i++) {
                        lines[i] = lines[i].split(',');
                        lines[i].map(function(val) {
                            return Number(val);
                        });
                    }
                    for (var i = 0; i < lines.length; i++) {
                        var marker = WE.marker([lines[i][0], lines[i][1]]).addTo(earth);
                        marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />"
                            , { maxWidth: 150, closeButton: true }).closePopup();
                    }
                }
            }
            var blob = file.slice(start, stop + 1);
            reader.readAsBinaryString(blob);
        }
    </script>
</body>
</html>

points.csv:

1,1
2,2
3,3
4,4

How to read and use a column in a local CSV file with javascript?

This code should parse a CSV file in the format you mention, e.g.

test.csv

name,emails
name1,email1
name2,email2
name3,email3
name4,email4
name5,email5

app.js

const Papa = require('papaparse');
const fs = require("fs");

let csvData = fs.readFileSync("test.csv", "utf-8");
csvData = csvData.trim().replace(/([^,]+),\s*([^,]+),\s*/gi, '$1,$2\n');
console.log("Adjusted csv:", csvData);

let { meta, data } = Papa.parse(csvData, { header: true });

console.log("Parsed data:", data);
console.log("Metadata:", meta);

The parsed data would look like so:

[
  { name: 'name1', emails: 'email1' },
  { name: 'name2', emails: 'email2' },
  { name: 'name3', emails: 'email3' },
  { name: 'name4', emails: 'email4' },
  { name: 'name5', emails: 'email5' }
]

How do I read a cvs file in javascript and store them in map?

If you have a series of items separated by commas (,), the you can iterate the String and explode or split the items. This can be done with Vanilla JavaScript. The magic part is the for() loop; iterating it by 2 instead of by 1, which is most commonly seen.

$(function() {  var myString = "Header 1,Value 1,Header 2,Value 2,Header 3,Value 3";
  var parts = myString.split(",");
  var myData = {};  for (var i = 0; i < parts.length; i += 2) {    myData[parts[i]] = parts[i + 1];  }    console.log(myData);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>