Convert JSON to JavaScript

The one thing a JSON to JavaScript converter has to get right

Converting JSON to a JavaScript object looks like the easiest job in this whole category. Every JSON document is already a valid JavaScript expression, so in principle you could change nothing at all and be finished. The reason anyone wants a tool is cosmetic: they want the output to look like code they would have written by hand, which mostly means dropping the quotes from the property names and switching the strings to single quotes.

And that is exactly where it goes wrong. A property name can only stand without quotes when it is a valid JavaScript identifier — it begins with a letter, an underscore or a dollar sign, and everything after that is letters, digits, underscores or dollar signs.userId qualifies. _internal and $ref qualify.user-name does not, because the parser reads the hyphen as subtraction.2fa does not, because no name may start with a digit.hello world does not, and neither does a.b, an empty string, or anything containing an emoji.

Several widely used converters strip the quotes from every key without checking. Feed one of them {"my-key": 1} and it hands back{ my-key: 1 } with a cheerful success indicator. That is not JavaScript. Paste it into a file and the build stops withSyntaxError: Unexpected token '-', and because the tool said it worked, the last place you look is the conversion.

This tool checks each key and quotes the ones that need it. More usefully, it counts them before you convert anything and names them on the receipt afterwards, so you can see that three of your forty-one keys were the fragile kind. When none of them are — which is the common case for hand-written API responses — it says that too, rather than implying it saved you from something.

Reserved words are fine, and large numbers are not

Two things that look like problems and behave differently. Reserved words such asclass, new, default and for are perfectly legal property names in any engine from ES5 onward, so{ class: 'primary' } needs no quotes at all. The tool leaves them bare and counts them separately, because the belief that they need quoting is common enough that a zero in that column is worth seeing. If you are targeting an engine old enough to care, or you simply prefer the quotes, switch key quoting to always.

Large integers are the real hazard, and nothing about the output will warn you. JSON permits a number of any length; JavaScript stores every number as a 64-bit float and loses exact integers above about nine quadrillion. An identifier such as12345678901234567890 becomes 12345678901234567000 the instant it passes through a JavaScript number. This tool never lets it: the digits are copied from your input into the output character for character, so the literal you get is the literal you gave. What happens after that is the language's problem rather than the conversion's — the moment your own code evaluates that literal, the precision is gone. When the value is an identity rather than a quantity, the honest fix is to keep it as a string in the JSON to begin with.

What the settings actually change

String quotes defaults to single, because that is what most JavaScript style guides ask for and because the escaping is handled properly in either direction — an apostrophe inside a single-quoted string is escaped, a double quote inside it is left alone, and vice versa. Indent covers two spaces, four spaces, a tab and minified. Declaration is a free text field rather than three preset buttons, so const data, export default,module.exports or whatever your project uses all go in front of the= unchanged. Leave it empty for a bare literal you can paste into an argument list.

Key quoting has a third setting called never, which produces exactly what the careless converters produce. It exists because occasionally you know your keys are safe and want the output shaped that way regardless. When that choice makes the output invalid, the receipt says so in plain words and lists the offending keys. A setting is allowed to be dangerous; it is not allowed to be silent.

JSON and a JavaScript object are not the same format

The last row is why the two directions of this conversion are not mirror images. Going from JSON to JavaScript can always succeed, because everything JSON can express has a JavaScript equivalent. Going the other way cannot, because a JavaScript object may hold a function, a date, an undefined or a reference to a variable, and JSON has no way to write any of them down. That direction lives atJavaScript object to JSON, and it reports every value it cannot carry across instead of dropping it quietly.

Nothing leaves this tab

The converter is a few kilobytes of JavaScript running inside the page you are reading. There is no upload endpoint, so there is nowhere for your document to go — which matters here more than the file size suggests, since the JSON people convert tends to be an API response with real customer records, a config file with hostnames in it, or a fixture pulled out of a production database. You can check the claim rather than believe it: open your browser's Network tab and then paste. Nothing is sent. If the input turns out to be invalid JSON, the JSON formatter points at the line and column and explains what the parser expected there.