JSON对象被引号

Question

我通过ajax调用从数据库获取数据。在ajax调用之后，我将数据打印到控制台，如下所示：

如果没有console.log(msg.users[i]);的JSON.stringify，则输出为：

使用console.log(JSON.stringify(msg.users[i]));

的JSON.stringify

输出（JSON 正确）：

{"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}

然后直接将此用户打印到控制台后我将一个元素附加到容器，如：

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

将此用户附加到数据属性后，问题就出现了 - 我不确切地知道是什么，但正在打破JSON对象，并在group_name字段后添加引号：

有趣的是，每个用户都不会遇到此问题。无论如何，登录到控制台的JSON对象是正确的，因此在添加具有该属性的元素后，一切都应该运行良好。

Answer 1

你可以通过利用jQuery来清理引用引用的混乱：

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

创建<li>元素并要求jQuery将"data-kid"属性设置为序列化对象。

Answer 2

如果要将整个json存储在属性中，则需要转义所有双引号。

＆＃13;

＆＃13;

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>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container"></ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您正在向DOM中绘制一个裸的，不带引号的属性，因此它会在第一个空白字符（浏览器解释为启动新属性）之后中断。您需要将属性值包装在引号中并转义字符串化JSON中的双引号，或者在属性本身周围包含单引号包装器（并转义数据中的任何单引号），如果您正在绘制它直接进入DOM：

＆＃13;

＆＃13;

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))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以在jQuery中设置data属性，而不是将其绘制到DOM中：

＆＃13;

＆＃13;

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))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

这将为您处理任何引用问题，但请注意，jQuery对data值使用自己的缓存;这不会在DOM本身中设置属性。 jQuery代码将能够访问数据，但是任何期望该属性在DOM中的东西都不会看到它。

Answer 4

我使用jsfiddle重建了您的问题，可以重现您的问题。

从我个人的观点来看，存储关于元素属性的信息对我来说毫无意义。

关于浏览器上的数据存储或将其限制为特定的id或值。 像json一样更好地保存像json这样的对象。如果需要，还可以添加对dom对象的引用。您正在进行可能导致问题或奇怪行为的非标准实施。

你在元素attr上持有json对象的用法是什么？

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"));