How to extract with jQuery json from data attribute with &quot inside?

user_12900102 0
Viewed 109

I store JSON in a data attribute, which contains &quot:

<div id="tt" data-json='{"t":"title: &quot;BB&quot;"}'></div>

I get the data-json value with jQuery:

aa1 = $('#tt').data('json');

However, I get a string aa1, not an object as I would expect. If I delete &quot from the JSON, then I get an object in aa1.

If I do so:

aa1_str = $('#tt').attr('data-json');
aa1 = JSON.parse(aa1_str);

I am getting an error in JSON.parse:

Uncaught SyntaxError: Unexpected token B in JSON at position 14

$('#tt').attr('data-json') returns an already parsed string, where &quot is replaced with ".

How can I correctly extract data from a JSON string which contains &quot?

jquery javascript
3 Answers

The problem is that the &quot; HTML entity gets decoded to a " before jQuery can parse the object. This turns the value in to {"t":"title: "BB""}, which is not a valid JSON string, hence jQuery does not parse it to an object for you and returns the original string.

To correct this you can use other HTML entities to encode the quotes, such as &ldquo; and &rdquo; or &#8220; and &#8221;, the latter of which I used in the following working example:

let aa1 = $('#tt').data('json');
console.log(aa1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tt" data-json='{"t":"title: &#8220;BB&#8221;"}'></div>

That being said, I would suggest a different approach; remove the need for the quotes at all. Just return the BB value in the title property and format the output to include title: in the UI, if necessary. For example:

<div id="tt" data-json='{"title": "BB"}'></div>
user_5194130

Maybe you can use decodeURIComponent

https://www.w3schools.com/jsref/jsref_decodeuricomponent.asp

aa1_str = $('#tt').attr('data-json');

var uri_enc = encodeURIComponent(aa1_str); // before you save the content

console.log(uri_enc);

var uri_dec = decodeURIComponent(aa1_str); // before you display the content

$("#test").text(uri_dec);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tt" data-json='{"t":"title: &quot;BB&quot;"}'></div>

<div id="test"></div>

user_4012780

I believe the problem is with your syntax in the attribute. JavaScript is, to my knowledge, unable to distinguish " form &quot;. Hence when you get the attribute, what is returned is: {"t":"title: "BB""}. This cannot be a valid JSON. My suggestion is to escape using simple backslash instead of special character escapes. So,

HTML

<div id="tt" data-json='{"t":"title: \"BB\""}'></div>

JQUERY

var aa1 = $('#tt').attr('data-json');
var jsonAa1 = JSON.parse(aa1);

Now jsonAa1 is a valid JSON object that you can use as you please.

user_54765980
Related