Drop CSV file to loadTable()

p5.js Coding Questions
1

Hello

I make a txt file with a header line, separated by commas, and some data lignes.

ID, name, age, favorite color
00, Robert, 32, blue
01, Michele, 36, white

If I use the drop() function, I get the file parameter

the file.data returns me an array containing every caracters in my text file

Is there a way to get my data the way loadTable() does, as an ordered table corresponding to my csv data ?

2
3

Hi @GoToLoop

I don’t see the “link below”

Do you mean you got something like this to work ?


let myTable;

function setup() {
  const c = createCanvas(710, 400);
  background(100);
  c.drop(gotFile);
}

function draw() {
  fill(255);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  text('Drag the file onto the canvas.', width / 2, height / 2);
  noLoop();
}

function gotFile(file) {

  if (file.type === 'text') {

  myTable = loadTable(file.data, 'csv', 'header');

  text(myTable.getString(1,1), width / 2, height / 2 + 20);

  } else {
    console.log('Not a proper file!');
  }
}
4

That’s a “boxed” link :link:. You need to click at its blue text: :computer_mouse:
“Load csv file with createfileinput”

You can also expand to its whole post text by clicking at the down arrow :arrow_down_small: at its top-right side. :wink:

1 Like
5

Ok, got it to work :slight_smile:


"use strict";

let csv;
let fileName;

function setup() {
  const c = createCanvas(710, 400);
  c.drop(gotFile);

  fill(255);
  noStroke();
  textSize(24);
}

function draw() {
  background(100);
  
  if(csv == null){
  textAlign(CENTER);
   text('Drag file onto the canvas.', width / 2, height / 2);
  }else{
  textAlign(LEFT);
  text(fileName , width / 4, height / 2 - 25);
  text(csv.getColumnCount() + ' colonnes ' + csv.getRowCount() + ' lignes' , width / 4, height / 2);
  text(csv.getString(1, 3) , width / 4, height / 2 + 25);
 }

}

function gotFile(f) {
  fileName = f.name;
  if (f.name.endsWith('.csv')) {
   csv = loadTable(f.data, 'header', print);
 } 

}

I just drop a txt file where I changed the extension to .csv
and the content being

id,name,age,link
0,robert,32,processing.org
1,sophie,27,rich.gg

thx for the help @GoToLoop

3 Likes