Almaceno JSON en un atributo de data
, que contiene "
:
<div id="tt" data-json='{"t":"title: "BB""}'></div>
Obtengo el valor data-json
con jQuery:
aa1 = $('#tt').data('json');
Sin embargo, obtengo una cadena aa1
, no un objeto como cabría esperar. Si elimino "
del JSON, obtengo un objeto en aa1
.
Si lo hago:
aa1_str = $('#tt').attr('data-json'); aa1 = JSON.parse(aa1_str);
Recibo un error en JSON.parse:
Error de sintaxis no detectado: token B inesperado en JSON en la posición 14
$('#tt').attr('data-json')
devuelve una cadena ya analizada, donde "
se reemplaza por "
.
¿Cómo puedo extraer datos correctamente de una cadena JSON que contiene "
?
El problema es que el "
La entidad HTML se decodifica a "
antes de que jQuery pueda analizar el objeto. Esto convierte el valor en {"t":"title: "BB""}
, que no es una cadena JSON válida, por lo que jQuery no lo analiza en un objeto por usted y devuelve la cadena original.
Para corregir esto, puede usar otras entidades HTML para codificar las comillas, como “
y ”
o “
y ”
, el último de los cuales usé en el siguiente ejemplo de trabajo:
let aa1 = $('#tt').data('json'); console.log(aa1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tt" data-json='{"t":"title: “BB”"}'></div>
Dicho esto, sugeriría un enfoque diferente; elimine la necesidad de las comillas en absoluto. Simplemente devuelva el valor BB
en la propiedad del título y formatee la salida para incluir el title:
en la interfaz de usuario, si es necesario. Por ejemplo:
<div id="tt" data-json='{"title": "BB"}'></div>
Tal vez puedas usar decodeURIComponent
https://www.w3schools.com/jsref/jsref_decodeuricomponent.asp
aa1_str = $('#tt').attr('data-json'); var uri_enc = encodeURIComponent(aa1_str); // before you save the content console.log(uri_enc); var uri_dec = decodeURIComponent(aa1_str); // before you display the content $("#test").text(uri_dec);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tt" data-json='{"t":"title: "BB""}'></div> <div id="test"></div>
Creo que el problema está en su sintaxis en el atributo. JavaScript es, que yo sepa, incapaz de distinguir "
form "
. Por lo tanto, cuando obtiene el atributo, lo que se devuelve es: {"t":"title: "BB""}
. Esto no puede ser un JSON válido. Mi sugerencia es escapar usando una barra invertida simple en lugar de escapes de caracteres especiales.
HTML
<div id="tt" data-json='{"t":"title: \"BB\""}'></div>
JQUERY
var aa1 = $('#tt').attr('data-json'); var jsonAa1 = JSON.parse(aa1);
Ahora jsonAa1
es un objeto JSON válido que puede usar como desee.