Search code examples
javascriptjsonsyntax-errorobject-literal

"SyntaxError: Unexpected token :" when inputting { "a": "", "b": "" } json in console


I'm getting errors, in both chrome and firefox developer tools, when trying to evaluate the following:

{
    "a": "",
    "b": ""
}

jsonlint.com tells me it's valid. Putting this code in an actual javascript file and running it works fine. The strangeness shows up only when I run this in the console in chrome developer tools or firebug. What's going on here?


Solution

  • You can't execute JSON in the console. The JavaScript engine thinks its a block statement, with a label.

    So this:

    {
        "a": "", "b": ""
    }
    

    is interpreted as a block statement. The "a": part is interpreted as a label. The "", "b" part is interpreted as an expression (two string literals and a comma operator in-between). Now the second : character is invalid in that position... Next, the "a" is interpreted as a string literal, and the : is not valid at that position.

    You work with JSON like so:

    1. You put it in a .json file,
    2. You retrieve it via Ajax as a string,
    3. You parse the string into an object with JSON.parse().

    (You can also keep JSON data as a string in a variable, for instance, or in the localStorage object. Either way, in regard to JavaScript, JSON data should always come as a string value.)