Estoy obteniendo datos en React desde una base de datos MySQL. MySQL escapa automáticamente de mis valores, incluidos los objetos anidados. Estoy usando la función .json() en el nivel superior, pero no puedo usarla en los subniveles, ni JSON.parse(response[0].data) funcionará.
¿Cuál es la forma correcta de hacer esto?
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 })Los datos de response.data no son una cadena JSON válida. Puedes probar:
const response = { "id": 1, "url": "asd2q13", "data": "{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}" } console.log(eval('(' + response.data + ')'))O mejor:
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))Pero,
Advertencia: ejecutar JavaScript desde una cadena es un riesgo de seguridad enorme. Es demasiado fácil para un mal actor ejecutar código arbitrario cuando usa
eval(). ¡Consulte Nunca use eval()! , abajo.
Le sugiero que serialice los data correctamente en el backend. Creo que el controlador de la base de datos MySQL puede hacer esto. Además, consulte Análisis de JSON (conversión de cadenas en objetos de JavaScript)
MySQL (MySQL2) para Node fue el gran problema aquí. Se supone que debe serializarse "automáticamente", pero de alguna manera termina mal.
Si hago JSON.Stringify() explícitamente para la parte anidada antes de almacenarla en la base de datos, ¡funciona!
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); };Entonces llamo a esto en la parte delantera
console.log(JSON.parse(response[0].data).name) // Marie (string) console.log(JSON.parse(response[0].data).answers) // ["2", "1", "0"] (array)El resultado bruto de esto es
{"name":"Marie","answers":["2","1","0"]}en lugar de
{name: \"Marie\", answers:[\"1\", \"3\", \"0\"]}