Estoy obteniendo datos de la base de datos a través de una llamada ajax. Después de la llamada ajax, imprimo los datos en la consola de esta manera:

Sin JSON.stringify por console.log(msg.users[i]); el resultado es:

enter image description here

Con JSON.stringify por console.log(JSON.stringify(msg.users[i]));

El resultado (JSON es correcto ):

{"kid_name":"Henryk","lying_down":false,"address_of_residence":null,"birthdate":null,"kid_last_name":"Kania","kid_id":1047,"group_name":"Klasa 0","group_id":243,"start_date":"2017-03-01","nazwa_diety":"Standardowa","extra_information":"","account":null,"kid_account":null,"diet_description":"","diet_school":217,"payment_day":1,"payments_hours":2,"card_numbers":null,"last_name":"Kania","name":"Henryk","id_kid":1047,"id_group":243,"activities_yearly_payments":false}

Luego, directamente después de imprimir este usuario en la consola, agrego un elemento al contenedor como:

$('#container').append('<li data-kid='+JSON.stringify(msg.users[i])+'>Test</li>');

Después de agregar a este usuario al atributo de datos, ocurre el problema: no sé exactamente qué, pero algo está rompiendo el objeto JSON y agrega comillas justo después del campo group_name:

Quotation mark which breaks the JSON

El hecho curioso es que este problema no ocurre para cada usuario. De todos modos, el objeto JSON conectado a la consola es correcto, así que después de agregar un elemento con el atributo, todo debería funcionar bien.

0
Martin 30 oct. 2017 a las 17:25

4 respuestas

La mejor respuesta

Puede limpiar el desorden de las citas entre comillas aprovechando jQuery:

$('#container').append($("<li/>", {
  "data-kid": JSON.stringify(msg.users[i])
}));

Eso crea el elemento <li> y le pide a jQuery que establezca el atributo "data-kid" en su objeto serializado.

2
Pointy 30 oct. 2017 a las 16:58

Si desea almacenar todo ese json dentro de un atributo, deberá escapar de todas las comillas dobles.

var data = {"kid_name":"Henryk","lying_down":false,"address_of_residence":null,"birthdate":null,"kid_last_name":"Kania","kid_id":1047,"group_name":"Klasa 0","group_id":243,"start_date":"2017-03-01","nazwa_diety":"Standardowa","extra_information":"","account":null,"kid_account":null,"diet_description":"","diet_school":217,"payment_day":1,"payments_hours":2,"card_numbers":null,"last_name":"Kania","name":"Henryk","id_kid":1047,"id_group":243,"activities_yearly_payments":false}

var safeAttribute = JSON.stringify(data).replace(/"/g,'/"');
alert(safeAttribute);

$('#container').append('<li data-kid="'+safeAttribute+'">Test</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container"></ul>
1
Jamiec 30 oct. 2017 a las 14:35

Reconstruí su problema con jsfiddle y puedo reproducir su problema.

Desde mi punto de vista personal, almacenar información sobre el atributo del elemento no tiene sentido para mí.

Analice su almacenamiento de datos en el navegador o limítelo a una identificación o valores específicos. Mantenga objetos como json mejor en el contexto js que en dom. Y agregue referencias a objetos dom si es necesario. Está pasando por una implementación no estándar que puede causar problemas o comportamientos extraños.

¿Cuál es su caso de uso para mantener objetos json en el elemento attr?

var obj = {"kid_name":"Henryk","lying_down":false,"address_of_residence":null,"birthdate":null,"kid_last_name":"Kania","kid_id":1047,"group_name":"Klasa 0","group_id":243,"start_date":"2017-03-01","nazwa_diety":"Standardowa","extra_information":"","account":null,"kid_account":null,"diet_description":"","diet_school":217,"payment_day":1,"payments_hours":2,"card_numbers":null,"last_name":"Kania","name":"Henryk","id_kid":1047,"id_group":243,"activities_yearly_payments":false}; var myJSON = JSON.stringify(obj); $('#demo').append('<li data-kid='+myJSON+'>Test</li>'); $("#out").append($("#demo li").attr("data-kid"));

-2
Gerlando Caldara 30 oct. 2017 a las 14:52

Está dibujando un atributo desnudo y sin comillas en el DOM, por lo que se rompe después del primer carácter de espacio en blanco (que el navegador interpreta como el inicio de un nuevo atributo). Debe ajustar el valor del atributo entre comillas y escapar de las comillas dobles en el JSON en cadena, o incluir un contenedor de comillas simples alrededor del atributo mismo (y escapar de las comillas simples en los datos), si lo está dibujando directamente en el DOM:

var thedata = {"group_name":"Klasa 0"};

$('#container').append("<li data-kid='"+JSON.stringify(thedata)+"'>Test</li>");

console.log($('li').data("kid"))
console.log(JSON.stringify(thedata))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Alternativamente, puede establecer el atributo de datos en jQuery, en lugar de dibujarlo en el DOM:

var thedata = {"group_name":"Klasa 0"};

$('<li>Test</li>')
  .data("kid", JSON.stringify(thedata))
  .appendTo('#container');

console.log($('li').data("kid"))
console.log(JSON.stringify(thedata))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Eso se encargará de cualquier problema de cotización, pero tenga en cuenta que jQuery usa su propia memoria caché para los valores de data; esto no establecerá el atributo en el DOM mismo. El código jQuery podrá acceder a los datos, pero cualquier cosa que espere que el atributo esté en el DOM no lo verá.

0
Daniel Beck 30 oct. 2017 a las 14:56