javascriptcsvobservablehq

searching through csv data in the Observable Framework


In the Observable Framework, I'm trying to load a csv file and make the fields searchable via the search input and also use the table input to display a table. I can't seem to find success.

My js looks like this:

const salaries = FileAttachment("./data/test.csv").csv({typed: true});
const searchInput = Inputs.search(salaries, {placeholder: "Search titles"});
const search = view(searchInput);

Inputs.table(search)

(I'm using ```js echo to fence the table input.)

The test csv I'm trying against looks like this:

APPOINTMENT TITLE,APPOINTING DEPT,APPT ANNUAL FTR,APPT FTR BASIS,APPT FRACTION,AMT OF SALARY PAID FROM GENL FUND
CUSTODIAN I,Building Services,38750.4,12-Month,1,38750.4
INPATIENT UNIT CLERK,MM UH CVC Clerical Svcs,37142.07,12-Month,0.8,0
IT ACAD/ADMIN DIV INTER DIR,MM Quality - Data Management,152841.7,12-Month,1,0
CLINICAL ASST PROF,MM PM&R,208290.72,12-Month,0.75,0
PROFESSOR,MM Ophthal. & Visual Science,210000,12-Month,1,0
REGISTERED NURSE - LEVEL C,MM CW 12W,92123.2,12-Month,0.75,0
PROFESSOR,"School of Music,Theatre&Dance",224794,9-Month,1,224794
REGISTERED NURSE - LEVEL E,MM UH CVC 6A,120099.2,12-Month,1,0
PROFESSOR,Int Med-Cardiology,225000,12-Month,1,0

Any diretion you can point me in would be appreciated.


Solution

  • You have to await the FileAttachment.

    const salaries = await FileAttachment("./data/test.csv").csv({typed: true});