JSON.parse报Uncaught SyntaxError：读取对象内容时数据终止，求解决方案

核心错误点 #

• 引号冲突导致JSON截断：直接把带双引号的JSON字符串写入value="..."时，HTML会将JSON内的第一个双引号识别为value属性的结束标记，最终input的value仅能拿到[{"片段，自然无法完成JSON解析。
• 变量赋值错误：代码中product_qualities_jason = JSON.stringify(product_qualities);写错了序列化目标——你要处理的是定义好的数组product_qualities_jason，但误写为未定义的product_qualities。
• HTML拼接语法错误：拼接display.innerHTML时存在换行未处理、多余>符号的问题，导致生成的HTML结构混乱。

修复后的完整代码 #

<div id="display"></div>
<script>
function display_quality(product_id ){
    let product_qualities = document.getElementById('product_qualities');
    console.log(product_qualities); // console.log n. 1
    product_qualities = product_qualities.value;
    console.log(product_qualities); // console log n. 2
    try {
        product_qualities = JSON.parse(product_qualities);
        console.log(product_qualities); // console log n. 3
    } catch(e) {
        console.error('JSON解析失败:', e);
    }
}

let product_id = 2;
let require_quality = 1;
let product_qualities_json = [
    {
        "product_quality_id":"1",
        "product_quality_name":"Novo",
        "status":"1",
        "date_added":"1576671650",
        "product_quality_code":"ABG567"
    },
    {
        "product_quality_id":"2",
        "product_quality_name":"Usado",
        "status":"1",
        "date_added":"1576600000",
        "product_quality_code":"FCR546"
    }
];
// 修复序列化目标变量
product_qualities_json = JSON.stringify(product_qualities_json);

let display = document.getElementById('display');
// 用单引号包裹value避免双引号冲突，改用ES6模板字符串简化拼接
display.innerHTML = `<input type="hidden" id="product_qualities" value='${product_qualities_json}'>
<b>Select quality</b> <input type="checkbox" id="require_quality" onchange="display_quality(${product_id})">`;
</script>

关键修复细节 #

• 解决引号冲突：用单引号'包裹input的value属性值，避开JSON字符串内的双引号，防止属性提前闭合；也可以将JSON内的双引号转义为"，但单引号方案更简洁。
• 修正序列化逻辑：确保JSON.stringify的参数是你定义好的数组变量，避免序列化未定义值。
• 优化HTML拼接：使用ES6模板字符串（反引号`），自动处理换行，避免手动拼接字符串的语法错误。
• 增加错误捕获：给JSON.parse添加try-catch块，方便后续排查解析类问题。

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