变量存储JSON数据转表格展示时遇Unexpected token o错误求助

你遇到的这个Unexpected token o错误，核心问题出在JSON字符串格式不合法上——你的JSON里嵌套了HTML代码，而HTML属性用的双引号没有正确转义，导致JSON解析器读到一半就误以为字符串结束了，直接抛出错误。

问题代码拆解 #

看你写的这段代码：

var somejson = "[{ \"key1\" : \"<header class=\"main-header dark-bg\"><div class=\"row\"></div></header>\"},{\"key2\" : \"<div class=\"row content clearfix worldwide dark-bg t--bg-5\"></div>\"}]";
var mainObject = JSON.parse(somejson);

里面的class="main-header"部分，双引号没有被转义。当JSON解析器读到这里时，会把这个双引号当成外层JSON字符串的结束标记，后面的内容就变成了非法的JSON结构，自然就报错了。

几种修正方案 #

任选一种就能解决问题：

1. 正确转义HTML中的双引号

因为是在JS字符串里嵌套JSON，所以HTML的双引号需要转义两次（一次给JS字符串，一次给JSON解析），写成\\\"：

var somejson = "[{ \"key1\" : \"<header class=\\\"main-header dark-bg\\\"><div class=\\\"row\\\"></div></header>\"},{\"key2\" : \"<div class=\\\"row content clearfix worldwide dark-bg t--bg-5\\\"></div>\"}]";
var mainObject = JSON.parse(somejson);
console.log(mainObject);

for (var key in mainObject) {
    var innerObject = mainObject[key];
    console.log(innerObject); // 现在能正常遍历输出了
}

2. 改用单引号包裹HTML属性

这种方式更简洁，不用反复转义：

var somejson = '[{ "key1" : "<header class=\'main-header dark-bg\'><div class=\'row\'></div></header>"},{"key2" : "<div class=\'row content clearfix worldwide dark-bg t--bg-5\'></div>"}]';
var mainObject = JSON.parse(somejson);
console.log(mainObject);

3. 用ES6模板字符串（推荐）

如果你的环境支持ES6，用反引号（`）包裹整个JSON字符串，引号处理会更直观：

const somejson = `[{ "key1" : "<header class='main-header dark-bg'><div class='row'></div></header>"},{"key2" : "<div class='row content clearfix worldwide dark-bg t--bg-5'></div>"}]`;
const mainObject = JSON.parse(somejson);
console.log(mainObject);

小提示 #

以后处理嵌套HTML的JSON字符串时，记得用不同类型的引号区分JSON结构和HTML属性，或者统一转义内层引号，就能避免这类解析错误啦。

内容的提问来源于stack exchange，提问作者Zabi