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 存储在属性中，则需要转义所有双引号。

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>

Answer 3

您正在向 DOM 中绘制一个未加引号的裸属性，因此它会在第一个空格字符（浏览器将其解释为开始一个新属性）之后中断。您需要将属性值用引号括起来并转义字符串化 JSON 中的双引号，或者在属性本身周围包含一个单引号包装器（并转义数据中的任何单引号），如果您将其直接绘制到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>

或者，您可以在 jQuery 中设置 data 属性，而不是将其绘制到 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>

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

Answer 4

我用jsfiddle 重新构建了您的问题，并且可以重现您的问题。

从我个人的角度来看，存储元素属性信息对我来说毫无意义。

考虑您在浏览器上的数据存储或将其限制为特定的 ID 或值。 像在 dom 上一样，在 js 上下文中更好地保​​存像 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"));