console.log and JSON.parse returning error

Question

I am attempting to parse a JSON string and log it to the Chrome console. The string validates using JSONLint. Why then is Chrome is returning the error: "Uncaught SyntaxError: Unexpected token %"?

<script>console.log(JSON.parse('{"header-top":{"name":"Header Top","id":"header-top","description":"","class":"","before_widget":"\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E","after_widget":"\u003C\/li\u003E\n","before_title":"\u003Ch2 class=\u0022widgettitle\u0022\u003E","after_title":"\u003C\/h2\u003E\n"}}'));</script>

Here is the JSON, Pretty Printed:

{
    "header-top": {
        "name": "Header Top",
        "id": "header-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "header": {
        "name": "Header",
        "id": "header",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "header-bottom": {
        "name": "Header Bottom",
        "id": "header-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content-top": {
        "name": "Content Top",
        "id": "content-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content": {
        "name": "Content",
        "id": "content",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content-bottom": {
        "name": "Content Bottom",
        "id": "content-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer-top": {
        "name": "Footer Top",
        "id": "footer-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer": {
        "name": "Footer",
        "id": "footer",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer-bottom": {
        "name": "Footer Bottom",
        "id": "footer-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    }
}

@DanielA.White I shortened the example and posted my actual JSON, Pretty Printed. — skibulk
– skibulk, Commented Aug 18, 2015 at 23:56

zerkms · Accepted Answer · 2015-08-18 23:57:57Z

1

That happens because of the \u0022 character in one of your strings.

The problem with it is that when the string literal (the long JSON) is evaluated it's being replaced with " (a quote character), which leads to some JSON string becoming broken:

"\u0022"

becomes

"""

So technically the given JSON is a valid JSON, but it cannot be used as-is in an environment that evaluates \uXXXX sequences.

So you could, for example, read it from some other source - eg as a response from AJAX request, but you cannot use it as a string literal in JS code.

edited Aug 18, 2015 at 23:57

answered Aug 18, 2015 at 23:55

zerkms

256k73 gold badges447 silver badges550 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Daniel A. White Over a year ago

so it needs to be \\u0022.

zerkms Over a year ago

@DanielA.White depends on what "needs" means :-) Because then it will be broken in some different way.

skibulk Over a year ago

Thanks @DanielA. White. I replaced all "\" with "\\" in my html and it works now.

zerkms Over a year ago

@skibulk yep, I realized that it would require much more replacements

zerkms Over a year ago

@skibulk it depends where it's used: in JSON a real 0xA character can be used between any tokens; in string values it's only exact \n (2 characters, slash followed by n) that is allowed.

|

Collectives™ on Stack Overflow

console.log and JSON.parse returning error

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related