Dynamically load files into observable framework

New To Observable
1

Is there a way to dynamically load dataset into observable framework based on client input? For example, I have like 100 files in a folder. I want to load a specific file based on the text input from client and apply all visualization on that.

1 Like
2

Hi there,

You cannot pass a variable into the FileAttachment function, but you can achieve this by loading all the files then filtering for the specific one you need. For example, you could have a dataset that looks something like:

const files = [
{id: 1, file: FileAttachment("./data/file-one.csv").csv()},
{id: 2, file: FileAttachment("./data/file-two.csv").csv()},
{id: 3, file: FileAttachment("./data/file-three.csv").csv()},
]

Then an input could filter for that specific file and use it for the subsequent visualizations.

Depending on what the files contain, you could also use the SQL front matter to load them all, then filter with a SQL code block for the one you need, based again on an input. This would be faster if youā€™re dealing with larger datasets.

2 Likes
3

Iā€™m pretty sure that maybe better would be

const files = [
  {id: 1, file: FileAttachment("./data/file-one.csv")},
  {id: 2, file: FileAttachment("./data/file-two.csv")},
  {id: 3, file: FileAttachment("./data/file-three.csv")},
]

Then, you might get the data via something like

let data = await files[0].file.csv();

Iā€™m thinking this approach would avoid the data transfer until itā€™s actually needed.

5 Likes
4

Is this something that will be considered in the future? It would be very helpful for dynamic calls on parameterized APIs (eg., get ā†’ myapi.com/{param} ).

I understand the alternative in the meantime is to use .fetch(), but ā€œparameterized FileAttachmentsā€ seems much better :slight_smile:

5

@javpascal Thereā€™s an open issue:

1 Like
6

Thanks @mootari! Following on Github now