Laravel 刀片中的 Unicode JSON 用于 React，生成 JSON.parse 问题

Posted 2023-03-15

【中文标题】Laravel 刀片中的 Unicode JSON 用于 React，生成 JSON.parse 问题

【英文标题】：Unicode JSON in Laravel blade for use in React, generating a JSON.parse problem

【发布时间】：2021-12-12 22:26:21

【问题描述】：

我在 DB 中有一个 json 对象：

"ui": ,
"title": "Hola mundo 2",
"values": ,
"properties": ,
"description": "descripcion"

在 Laravel 控制器中，我将数据发送到视图：

$surveyData = Empresa::find($empresa_id)->survey;    
return view('surveys.edit')->with('surveyData', json_encode($surveyData));

在 Laravel Blade 中，我将数据附加到一个 div 中：

<div id="poll" data-survey=@json($surveyData)></div>

在 React 中，我获取数据并保存在 oldData 变量中：

const oldData = document.querySelector("#poll").dataset.survey

问题是我在 React 中收到 JSON.parse 错误，因为 JSON 在 Laravel 视图 DOM 中以以下 unicode 格式打印：

<div id="poll" data-survey="\u0022\\\u0022ui\\\u0022: , \\\u0022title\\\u0022: \\\u0022Hola mundo 2\\\u0022, \\\u0022values\\\u0022: , \\\u0022properties\\\u0022: , \\\u0022description\\\u0022: \\\u0022descripcion\\\u0022\u0022"></div>

当我在 React 中解析该 json 时：

JSON.parse(oldData)

我收到此错误：

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

我真的不知道错误在哪里，也不知道该怎么办。

【问题讨论】：

它告诉你 json 以 "（即 \u0022）开头，这是无效的 json。

【参考方案1】：

您似乎对 JSON 数据进行了双重编码： json_encode($surveyData) 然后@json($surveyData) 改变

return view('surveys.edit')->with('surveyData', json_encode($surveyData));

到

return view('surveys.edit')->with('surveyData', $surveyData);

【讨论】：

谢谢，现在它在 JSON 数据的第 1 行第 2 列要求“”：未捕获的语法错误：JSON.parse：预期的属性名称或“”

我已经解决了，谢谢。我必须做出反应：JSON.stringify before parsing