# Using loadTable with correct types in typescript with p5js
**URL:** https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236
**Category:** Libraries
**Created:** [May 24, 2020, 1:10pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236 "2020-05-24T13:10:27Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 1:10pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/1 "2020-05-24T13:10:27Z")
I am loading a csv file using the p5.js function, loadTable in typescript. It seems that its not reading the csv file at all, maybe i am missing something in my approach. I have all the type definition in typescript for p5.js.
Here is the code, main.ts.
```auto
import * as p5 from "p5";
const plot_diagram = (p: p5) => {
let data: p5.Table;
p.preload = () => {
const CSV_FILE: string = "./sample.csv";
const CSV_TYPE: string = "csv";
const CSV_HEADER: string = "header";
data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER); //how to fix this?
console.log("data ", data.getRowCount()); // shows wrong object.
};
p.setup = () => {
p.createCanvas(640, 480);
p.noFill();
// how many rows?
console.log("row ", data.getRowCount());
// what are the columns?
console.log("col ", data.columns);
};
p.draw = () => {
p.background(200);
p.beginShape();
for (let i = 0; i < 5000; i++) {
p.vertex(
data.getNum(i, "row"),
data.getNum(i, "col ")
);
}
p.endShape();
};
};
export default plot_diagram;
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 24, 2020, 1:48pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/2 "2020-05-24T13:48:34Z")
> [@suvir](#):
>
> `export default spectrum;`
Where’s that variable _spectrum_. Shouldn’t that be instead: `export default plot_diagram;`
> [@suvir](#):
>
> `import * as p5 from "p5";`
Is “p5” path just enough? I had to use `import * as p5 from "p5/index";` on my own TS sketch:
>
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 1:51pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/3 "2020-05-24T13:51:35Z")
Sorry for the mis type, it is,
```auto
export default plot_diagram
```
and i changed to
```auto
import * as p5 from "p5/index";
```
still no difference. The problem is line,
```auto
data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER);
```
that data is empty.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 24, 2020, 2:01pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/4 "2020-05-24T14:01:36Z")
> [@suvir](#):
>
> That _data_ is empty.
[**preload()**](https://p5js.org/reference/#/p5/preload) is still too soon to check anything on _data_ b/c it’s still loading.
Can you host your whole sketch on [GitHub.com](http://GitHub.com), [Glitch.com](http://Glitch.com) or similar?
Here’s another online example:
https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls?path=sketches/instance.mjs&previewSize=0&sidebarCollapsed=true
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 2:07pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/5 "2020-05-24T14:07:19Z")
Thanks for the glitch link. I can look into. And good to know that preload is too soon.
Here is the whole repo.
> **[suvirbhargav/p5\_react](https://github.com/suvirbhargav/p5_react)**
>
> Contribute to suvirbhargav/p5\_react development by creating an account on GitHub.
just do yarn, yarn start. might ask you to install parcel.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 24, 2020, 2:27pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/6 "2020-05-24T14:27:14Z")
Oh, that’s React! Sorry I still dunno much about it. 😿
Most I can do is take a look at your “spectrum.ts” file and make it work as it is w/o React: 🧐
>
>
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 2:29pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/7 "2020-05-24T14:29:15Z")
> [@GoToLoop](#):
>
> spectrum.ts
yes, spectrum.ts is the main file i am working on.
To get the project running, uncomment, //import sketch from “~sketch/circle”;
and comment import sketch from “~sketch/spectrum”;
That will give you some circles. The spectrum file is basically supposed to create a x-y plot.
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 2:37pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/8 "2020-05-24T14:37:58Z")
Only thing that i am struggling with is to load csv in typescript and have the data var with csv values.
Rest i can manage. once i have data var, i can run data.getNum and other functions on it.
Only clue i got so far is from this SO answer, but that only works because there is a type called SoundFile.
[https://stackoverflow.com/questions/56199144/how-to-use-p5-sound-in-typescript-node-js](https://stackoverflow.com/questions/56199144/how-to-use-p5-sound-in-typescript-node-js).
So what’s the work around to call
```auto
loadTable("./less.csv", "csv", "header");
```
in typescript with correct types?
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 24, 2020, 6:59pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/9 "2020-05-24T18:59:25Z")
Here is the another repo where i played with the idea of loading a csv file, it seems it does not work in typescript here too. [github.com/suvirbhargav/p5js-typescript-fusebox](https://github.com/suvirbhargav/p5js-typescript-fusebox)
I added the code in sketch.ts in the above repo. Could it be that loadTable doesn’t work when running a local project? Perhaps i misunderstood its use case?
---
### Author:  [@suvir](https://discourse.processing.org/u/suvir)
#### Post date: [May 28, 2020, 5:04pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236/10 "2020-05-28T17:04:19Z")
ah, i figure it out. The issue was not related to typescript. It was browser cors policy.
Perhaps a better error message is needed in loadTable function.