loadTable from object and not from url

p5.js Coding Questions
1

Hi,

This is what i was doing before.

p.preload = () => {
    data = (p as any).loadTable("http://127.0.0.1:3448/sample.csv", "csv", "header");
  };

I would like to intiliaze the data above from a js response object. The object has the same csv content.
My question is how to initialize a p5 table from an object consisting of csv content as string.

2

Hello!

Theres no shortcut to accomplish that, I’m afraid. You’ll have to build the table row for row using p5.TableRow.

3

hmm…i have like 23437 rows actually. That’s going to be expensive operation.

4

Well, that’s what happens behind the scenes anyway. If there was a p5.js function to which you could pass CSV content as a string, that function would still have to break the string apart and build a p5.Table from those parts. It wouldn’t be a less expensive operation just because another programmer implemented the function for you.

I wouldn’t worry too much before you actually try it, though. Maybe it will go faster then you expect, and you only have to do it once at the beginning of your sketch, during setup.

Just because I’m curious, what’s the reason you can’t have the CSV in a file and use the built-in loadTable function?

5

I have it originally in a file, but then i use swagger UI to make a get api call and i get the data in response.

6

Hmm, interesting. How are you making the GET API call, could you share the code?

7

Here you go,

Interesting line to see is

      <P5Wrapper sketch={sketch} data={data} />

and you to get the csv file from url, type less-xy.csv.

In short, what i am trying to accomplish in that code sandbox is, fetch a csv file using swagger and then display its content using p5-js. As you can see in the code, right now, i have hard coded the url in p5.js, so we are actually fetch file twice, once from swagger and one done by p.preload…I want to load the data dynamically in p5.js.