JSONオブジェクトが引用符で壊れています

Question

私はデータベースからajax呼び出しでデータを取得しています。 console.log(msg.users[i]);によってJSON.stringifyなし

出力は次のとおりです：私はこのようなコンソールにデータを印刷していますAJAX呼び出した後

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を活用することにより、引用引用符の混乱を一掃することができます：<li>要素を作成し、jQueryのを頼む

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

があなたのシリアライズさに"data-kid"属性を設定しますオブジェクト。

Answer 2

匿名の引用符で囲まれていない属性を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>

また、あなたの代わりにDOMにそれを描くの、jQueryの中でデータ属性を設定することができます。

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 3

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 4

jsfiddleで問題を再構築して問題を再現できます。

私の個人的な見解では、要素属性に関する情報を格納することは意味がありません。

ブラウザ上のデータストレージを上書きするか、特定のIDまたは値に制限してください。 jsonのようなオブジェクトをjsコンテキスト上でdomと同じように保持する。必要に応じて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"));