I'm working on a project where I need to be able to update an HTML table, and I would do it through javascript. I have not yet made an HTML site for this project, for I would try to convert a CSV file to a Java array, which would update the HTML table.
I have been trying with papa parse, but it would not work for me. I have no experience with npm and installing and getting stuff to work like Papa parsa. I have found this website, which has a great function to convert CSV to an array. One problem with this function is, that I can't take a local file on the server, and put it into the function as I do with a string. Maybe I have overlooked something?
I have got Papa Parse to work somehow, but I can't figure out how I use it on a local file, so I have two codes for the job, but I don't know how to get them to do it or how good the outcome is.
I just got a random CSV file as a test file. Normal.csv came from papa parse website.
-- to sum up -- I want to take a CSV file, turn it into a Java array, and then make that into an HTML table
Here is my long HTML file, with all scripts - no CSS at this point.
File(s) is being hosted on local Apache/XAMPP server.
<head>
<title>Test af Papa Parse</title>
</head>
<body>
<p>Hey - Test paraghaph</p>
<script src="node_modules/papaparse/papaparse.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
/*edit: src="http://localhost/test/node_modules/papaparse/papaparse.min.js"*/
/*edit: src="http://localhost/test/node_modules/jquery/dist/jquery.min.js"*/
<script>
var config = {
download: true,
// rest of config ...
delimiter: "", // auto-detect
newline: "", // auto-detect
quoteChar: '"',
escapeChar: '"',
header: false,
trimHeaders: false,
dynamicTyping: false,
preview: 0,
encoding: "",
worker: false,
comments: false,
step: undefined,
complete: undefined,
error: undefined,
download: false,
skipEmptyLines: false,
chunk: undefined,
fastMode: undefined,
beforeFirstChunk: undefined,
withCredentials: undefined,
transform: undefined
}
var data = csv2array("http://localhost/test/normal.csv")
var data2 = Papa.parse("http://localhost/test/normal.csv", config)
console.log("papa parsa - direktly: "+ Papa.parse("http://localhost/test/normal.csv", config))
console.log(data)
console.log("data2 = "+data2)
console.log(data2);
/**
* Convert data in CSV (comma separated value) format to a javascript array.
*
* Values are separated by a comma, or by a custom one character delimeter.
* Rows are separated by a new-line character.
*
* Leading and trailing spaces and tabs are ignored.
* Values may optionally be enclosed by double quotes.
* Values containing a special character (comma's, double-quotes, or new-lines)
* must be enclosed by double-quotes.
* Embedded double-quotes must be represented by a pair of consecutive
* double-quotes.
*
* Example usage:
* var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
* var array = csv2array(csv);
*
* Author: Jos de Jong, 2010
*
* @param {string} data The data in CSV format.
* @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
* The Delimeter must be a single character.
* @return {Array} array A two dimensional array containing the data
* @throw {String} error The method throws an error when there is an
* error in the provided data.
*/
function csv2array(data, delimeter) {
// Retrieve the delimeter
if (delimeter == undefined)
delimeter = ',';
if (delimeter && delimeter.length > 1)
delimeter = ',';
// initialize variables
var newline = '\n';
var eof = '';
var i = 0;
var c = data.charAt(i);
var row = 0;
var col = 0;
var array = new Array();
while (c != eof) {
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i); // read next char
}
// get value
var value = "";
if (c == '\"') {
// value enclosed by double-quotes
c = data.charAt(++i);
do {
if (c != '\"') {
// read a regular character and go to the next character
value += c;
c = data.charAt(++i);
}
if (c == '\"') {
// check for escaped double-quote
var cnext = data.charAt(i+1);
if (cnext == '\"') {
// this is an escaped double-quote.
// Add a double-quote to the value, and move two characters ahead.
value += '\"';
i += 2;
c = data.charAt(i);
}
}
}
while (c != eof && c != '\"');
if (c == eof) {
throw "Unexpected end of data, double-quote expected";
}
c = data.charAt(++i);
}
else {
// value without quotes
while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
value += c;
c = data.charAt(++i);
}
}
// add the value to the array
if (array.length <= row)
array.push(new Array());
array[row].push(value);
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i);
}
// go to the next row or column
if (c == delimeter) {
// to the next column
col++;
}
else if (c == newline) {
// to the next row
col = 0;
row++;
}
else if (c != eof) {
// unexpected character
throw "Delimiter expected after character " + i;
}
// go to the next character
c = data.charAt(++i);
}
return array;
}
</script>
</body>
3 Answers 3
You don't need whole libs to parse CSV, which is the simplest format I can think of. Fetch the file via ajax then use one of these functions to do the CSV → array cast.
var CSVContent = `column1, column2, column3
1, 2, hello
3, 4, world`;
function CSVToArrayOfArray(content) {
return content
.split('\r\n').join('\n') // CRLF -> LF
.split('\n')
.map(line => line.split(',').map(value => value.trim()));
}
function CSVToArrayOfObjects(content) {
let ret = CSVToArrayOfArray(content)
.map((arr, index, all) => {
if (index==0) {
return arr;
}
let obj = {};
all[0].forEach((field, i) => obj[field] = arr[i])
return obj;
});
ret.shift();
return ret;
}
console.log(CSVToArrayOfArray(CSVContent));
console.log(CSVToArrayOfObjects(CSVContent));7 Comments
fetch('localhost/path/to/resource).then(content => console.log(CSVToArrayOfArray(content)))content should be a string. Make sure it is.I think your best option is to simplify everything until you figure out exactly what you need. Here is a very basic working Papa.parse. You have no need for the config file unless you are doing something that specifically requires it. Here is a plnkr link
<html>
<head>
<script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.1/papaparse.min.js"></script>
</head>
<body>
<script>
let csvString = '2018-06-29,2018年06月29日,111211,15:35:00,77,15:50:00,,Blah,Internet User,,Baln bla,0,4,0,0,0,516ドル.00 ,120ドル.00 ,396ドル.00 ,19ドル.80 ,415ドル.80 ,,0ドル.00 ,0ドル.00 ,415ドル.80';
//let array = Papa.parse(csvString);
//console.log(array);
let array = Papa.parse('http://localhost/test/filename.csv',{download:true});
console.log(array);
</script>
</body>
</html>
Once you have this working on your local server, delete the csvString, load the file in and go from there... edit: npm is a great tool for a lot of things, however from what I can tell, this doesn't seem like a great use case for it.
1 Comment
The final codes. Tried to explain every step, so anybody knows how it works
<head>
<meta charset="UTF-8">
</head>
<body>
<!--Loading Papa.parse-->
<script src="http://localhost/test/node_modules/papaparse/papaparse.min.js"></script>
<!--The script-->
<script>
//The file with the csv data
var CSVFile = "http://localhost/test/download.csv"
//papa.parse function, which converts CSV file to array
function parse() {
Papa.parse(CSVFile,{
download: true, //When linking an URL the download must be true
header: true, //makes the header in front of every data in the array
complete: function (results) { //Runs log function, with results from the conversion
log(results);
}
});
}
//Papa.parse does it own callback and launches this function when done
function log(arrayFromPapa) {
//Writes the array in the console
console.log(arrayFromPapa);
//Makes the array a global array
array = arrayFromPapa
}
//luanching the program
parse()
</script>
</body>
Comments
Explore related questions
See similar questions with these tags.
http://localhostinstead offile://