🏠 back to Observable

How best to enter a small table of data?

#1

Sometimes it’s easiest to enter a small table of data directly into a cell rather than downloading it from the source. What’s the best approach for this? I have been using “new Map” to create a JavaScript map from an array of arrays and “get” to look up an entry, but for tables with more than two columns, this seems unwieldy.

In particular, the JavaScript error messages are not very good when I make typos; I find myself guessing where the syntax error might be.

0 Likes

#2

I would consider using CSV format, but the best method probably depends on context / use case.

Try searching among existing notebooks https://observablehq.com/search?query=csv https://observablehq.com/search?query=table etc.

0 Likes

#3

You could use an array of objects:

data = [
  { firstName: 'Jane', lastName: 'Doe', age: 33 },
  { firstName: 'John', lastName: 'Doe', age: 37 },
]
0 Likes

#4

Maybe consider this “application” approach:

0 Likes

#5

Hey Brian,

This is admittedly a guess, but to add to what other folks have already contributed to this thread - especially because you mention an error message, what you might be running into is how to represent JavaScript objects.

What you might be running into is how objects need to be parenthesized if they’re by themselves. Introduction to Code is a good primer on this topic: the gist is that, because Observable has blocks, like

a = { return 1; }

Objects need to be disambiguated by having parentheses, like:

a = ({ value: 1 })

Which differs from typical JavaScript, which might look like const a = { value: 1 }`.

0 Likes

#6

Yep, thanks! (I did eventually figure that out.)

0 Likes

#7

Aha. I wouldn’t have guessed that in particular was the issue.

Both:

a = ({ foo: 1, bar: 2 })

and

b = {
  return { foo: 1, bar: 2 };
}

will work. The latter can be nice if you want to run some other code to generate your object.


I wonder if there’s any way to make better error messages to help newcomers through this particular hurdle. SyntaxError: Unexpected token with a little red caret under the second : is indeed a bit hard to interpret if you don’t know what’s happening.

0 Likes

#8

Ideally there would be UI for quick copy-and-paste of tabular data. Perhaps an “insert CSV data” action that automatically converts it to an array of objects with everything properly quoted and escaped?

Or suppose you want to copy a rectangle of data from a spreadsheet? What’s the easiest way to do that?

1 Like

#9

A way to help improve that would be to try parsing the object as an expression once that error is hit and if it parses, output a friendlier message suggesting the addition of parens.

0 Likes

#10

Does copy/paste work between e.g. google spreadsheet & excel or other desktop software?

I’m not too familiar with what browsers expose in their copy/paste API.

Edit: this new API doesn’t seem too broadly supported https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read

Here’s Safari’s version, https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/CopyAndPaste.html

0 Likes

#11

Another option would be some kind of input mode that’s especially friendly for tabular data. (With arrow keys for switching between subcells and so on.) We know this has to be possible since Google Sheets does it.

But I guess CSV is it for now.

0 Likes