调用API返回的字符串属性转JSON对象报解析错误如何解决

抛出这个错误的核心原因是你拿到的接口返回内容不符合标准JSON语法规则：标准JSON强制要求所有对象键名、字符串值必须用双引号"包裹，禁止使用单引号。你拿到的返回内容里从外层的name: 'Fred'到内层数组的键、值全用了单引号，JSON.parse解析到第一个单引号的位置（也就是报错提示的position 2）就会直接抛出语法错误。
另外你提到返回的data属性是字符串类型，解析前先打印原始响应确认结构，不要误把整个响应对象当成要解析的字符串传入。

优先方案：推动后端返回标准JSON #

这是最稳妥无坑的方案，让后端调整接口输出逻辑，严格按照JSON规范返回内容：

• 所有对象键名、字符串值统一用双引号包裹
• 特殊字符按JSON规则做转义
• 不要返回HTML转义字符
  标准返回格式参考：

{
  "name": "Fred",
  "data": [
    {
      "name": "10\" x 45\" Nice Shirts (2-pack)",
      "price": "$30.25"
    }
  ]
}

这种格式前端直接调用JSON.parse()就能正常解析，拿到数组后直接给*ngFor遍历即可，不需要额外做兼容处理。

临时兼容方案：前端自行处理非标准格式 #

如果后端暂时无法修改，可以在前端做格式转换后再解析，注意这类方案都存在边界问题，仅作为临时方案使用：

1. 格式替换后再用JSON.parse解析
   先把非标准的JS对象字符串替换成合法JSON字符串，再做解析：

   // 注意：如果data本身是独立的字符串字段，这里取接口返回中data对应的字符串内容即可
   const rawResponseStr = `{ name: 'Fred', 
   data: [{'name': '"10\\" x 45\\" Nice Shirts (2-pack)"', 'price': '$30.25'}]
   }`
   
   const validJsonStr = rawResponseStr
     .replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":') // 给未加引号的键名补双引号
     .replace(/'/g, '"') // 把包裹字符串的单引号替换为双引号
     .replace(/"/g, '"') // 还原HTML转义的双引号
     .replace(/\\+/g, '\\') // 处理多余的转义斜杠
   
   const parsedResult = JSON.parse(validJsonStr)
   

2. 可信内容下用构造函数解析
   如果你能100%确认接口返回内容没有恶意注入代码，可以用Function构造函数直接解析JS对象字面量，不需要做字符串替换，但是绝对不要用这个方法解析不可信来源的内容，避免触发XSS漏洞：

   const parsedResult = (new Function('return ' + rawResponseStr))()
   

解析完成拿到标准数组后，直接在Angular模板中遍历即可：

<div *ngFor="let product of parsedResult.data">
  <p>商品名称：{{product.name}}</p>
  <p>商品价格：{{product.price}}</p>
</div>

• 字符串替换的方案存在明显边界缺陷：如果商品名称等字段内容里本身包含单引号、双引号，替换逻辑很容易把内容里的引号也替换掉，导致解析失败或者内容错乱，能改后端就不要长期用前端兼容方案
• 解析前务必打印原始响应内容确认结构，很多时候解析失败是因为拿错了要解析的字段，比如本来应该解析response.data.data，结果传了整个response对象进去

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