如何在JavaScript中解析JSON获取页面存储的用户列表并解决解析报错

错误原因 #

你遇到的SyntaxError报错是因为data-users属性中存储的内容不符合JSON规范：多个独立对象没有放在数组中，且对象之间没有逗号分隔，JSON解析器读取到第一个对象结束符}后，下一个字符是{不符合语法要求，因此抛出异常。

解决方法 #

方案1：修正HTML端data属性（推荐） #

先将data-users的内容调整为合法JSON数组格式，修改后HTML代码如下：

<div id="all_users" data-users='[{"name":"jan","userName":"user_jan"},{"name":"jack","userName":"user_jack"},{"name":"jim","userName":"user_jim"}]'></div>

再编写JS代码解析并输出你需要的格式：

const usersDom = document.querySelector("#all_users");
// 解析合法JSON
const originUsers = JSON.parse(usersDom.dataset.users);
// 组装为目标格式
const targetData = {
  values: originUsers.map(item => {
    // 你示例中jack、jim的userName前缀从user改为了对应名称，按实际需求调整即可，不需要修改可直接返回item
    item.userName = `${item.name}_${item.name}`;
    return item;
  })
};
console.log(targetData);

方案2：不修改HTML，直接处理现有字符串 #

如果无法调整HTML内容，可以手动修正字符串格式后再解析：

const usersDom = document.querySelector("#all_users");
const rawUserStr = usersDom.dataset.users;
// 替换对象间隔符、包裹数组括号，转为合法JSON格式
const fixedJson = `[${rawUserStr.replace(/\}\{/g, '},{')}]`;
const originUsers = JSON.parse(fixedJson);
// 后续组装目标格式逻辑和方案1一致
const targetData = {
  values: originUsers.map(item => {
    item.userName = `${item.name}_${item.name}`;
    return item;
  })
};
console.log(targetData);

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