Abrufen von Datenattributen mit jQuery "

Question

Beim Abrufen von Datenattributen mit .data() von jQuery, und dieses Datenattribut enthält die HTML-Entitäten für doppelte Anführungszeichen, kann es nicht in ein JSON-Objekt konvertiert werden. Wie Sie unten sehen, ist es einfach, da keine gültige JSON gesehen und daher behandelt wie es einen String:

var dataAsString = $("[data-someprop]").data("someprop"); 
 
var dataAsString2 = $("[data-someprop2]").data("someprop2"); 
 

 
var dataAsJSON = $("[data-anotherprop]").data("anotherprop"); 
 

 
$(".target1").append(typeof(dataAsString)); 
 
$(".target2").append(typeof(dataAsString2)); 
 
$(".target3").append(typeof(dataAsJSON));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-someprop='{ 
 
        "key": "some &quot;value&quot; in quotes" 
 
        }'></div> 
 

 
<div data-someprop2='{ "key": "some &quot;value&quot; in quotes" }'></div> 
 

 
<div data-anotherprop='{ 
 
        "key": "some value without quotes" 
 
        }'></div> 
 

 

 

 
<div class="target1"></div> 
 
<div class="target2"></div> 
 
<div class="target3"></div>

Wie kann ich doppelte Anführungszeichen durch JSON-Objekte in Daten-Attribute übergeben?

bearbeiten: Ein drittes Beispiel hinzugefügt, um zu zeigen, dass es nicht die Zeilenumbrüche sind.

Answer 1

Das Problem wird durch die Zeilenumbrüche in der HTML-codierten JSON-Zeichenfolge-Version verursacht. Die unten funktioniert:

var dataAsString = $("[data-someprop]").data("someprop"); 
 
var dataAsString2 = $("[data-someprop2]").data("someprop2"); 
 
var dataAsString3 = $("[data-someprop3]").data("someprop3"); 
 
var dataAsString4 = $("[data-someprop4]").data("someprop4"); 
 

 
$(".target1").append(typeof(dataAsString) + ' - ' + dataAsString.key); 
 
$(".target2").append(typeof(dataAsString2) + ' - ' + dataAsString2.key); 
 
$(".target3").append(typeof(dataAsString3) + ' - ' + dataAsString3.key); 
 
$(".target4").append(typeof(dataAsString4) + ' - ' + dataAsString4.key);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-someprop='{&quot;key&quot;: &quot;some value without quotes&quot;}'></div> 
 
<div data-someprop2='{ "key": "some &quot;value&quot; in quotes" }'></div> 
 
<div data-someprop3='{ "key": "some &nbsp;value&nbsp; in quotes" }'></div> 
 
<div data-someprop4='{ 
 
    "key": "some &nbsp;value&nbsp; in quotes" 
 
}'></div> 
 

 

 
<div class="target1"></div> 
 
<div class="target2"></div> 
 
<div class="target3"></div> 
 
<div class="target4"></div>