JSON 解析 React 中的嵌套对象答案

【问题标题】：JSON Parse nested objects in ReactJSON 解析 React 中的嵌套对象
【发布时间】：2021-12-23 14:20:39
【问题描述】：

我正在从 MySQL 数据库中获取 React 中的数据。 MySQL 自动转义我的值，包括嵌套对象。我在顶层使用 .json() 函数，但我无法在子层使用它，JSON.parse(response[0].data) 也无法使用。

正确的做法是什么？

 fetch(`http://localhost:3000/getQuiz${window.location.pathname}`, requestOptions)
  .then(response => response.json())
  .then(response => {
    console.log(response)
    //   {
    //     "id": 1,
    //     "url": "asd2q13",
    //     "data": "{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}"
    // }
    console.log(typeof response)
    // object
    console.log(response[0].data)
    // {name: "Marie", answers:["1", "3", "0"]}
    console.log(typeof response[0].data)
    // string
    console.log(response[0].data.name)
    // undefined
  })

【问题讨论】：

我认为这是因为它不喜欢 {name: "Marie", answers:["1", "3", "0"]} 在属性名称周围缺少引号。 JSON spec 指定对象成员为 字符串名称-分隔符值（第 2.2 节），它进一步说明 字符串以引号开始和结束（第 2.5 节)。所以存储在 data 属性中的“JSON”中的属性名称是无效的。 JSON.parse() 会抛出错误吗？

标签： javascript reactjs json fetch

【解决方案1】：

response.data 不是有效的 JSON 字符串。你可以试试：

const response = {
  "id": 1,
  "url": "asd2q13",
  "data": "{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}"
}
console.log(eval('(' + response.data + ')'))

或更好：

const response = {
  "id": 1,
  "url": "asd2q13",
  "data": "{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}"
}

function looseJsonParse(obj) {
  return Function('"use strict";return (' + obj + ')')();
}

console.log(looseJsonParse(response.data))

但是，

警告：从字符串执行 JavaScript 存在巨大的安全风险。当你使用eval() 时，坏演员很容易运行任意代码。请参阅下面的Never use eval()!。

我建议你在后端正确序列化data。我认为 MySQL 数据库驱动程序可以做到这一点。另见Parsing JSON (converting strings to JavaScript objects)

【讨论】：

谢谢，看来有道理，我会在数据库端做一些故障排除。
@RustyJames 更新了答案。

【解决方案2】：

Node 的 MySQL (MySQL2) 是这里的大问题。假设是“自动”序列化，但不知何故它最终都错了。

如果我在将嵌套部分存储到数据库之前明确地为嵌套部分执行JSON.Stringify()，它就可以工作！

    const sendToDatabase = () => {
       let nested = JSON.stringify({ name: "Marie", answers: ["2", "1", "0"] })
       let post = { url: "asd2q13", data: nested} 
       var query = connection.query(
           "INSERT INTO users SET ?  ", post,
           function (error, results, fields) {
               if (error) throw error;
           }
       );
       console.log(query.sql); 
   };

然后我在前端调用这个

   console.log(JSON.parse(response[0].data).name)
   // Marie (string)
   console.log(JSON.parse(response[0].data).answers)
   // ["2", "1", "0"] (array)

这个的原始输出是

{"name":"Marie","answers":["2","1","0"]}

插入

{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}

【讨论】：