JSON data in DATASET attributes

Question

I try to store some JSON data in data-* attributes, but I have encounter one problem: while I generating source code:

<input type="text" data-ia='{"myValue":"One&#039;two&#039;three"}'>
<input type="text" class="input2" data-ia='{"myValue":"OneTwo&quot;three"}'>

and when I trying to get this data

var myData = input.dataset.ia;
var data = JSON.parse(myData);

I've got an error:

SyntaxError: JSON.parse: expected ',' or '}' after 
property value in object at line 1 column 20 of the JSON data

And when I looked into the sources the browser shows me:

<input type="text" class="input2" data-ia='{"myValue":"OneTwo"three"}'>

And I have assumed, that it is a problem, but ho to solve it I have no idea. When i tryed to copy this row it's become more confusing as I paste it:

<input type="text" data-ia="{&quot;myValue&quot;:&quot;OneTwo&quot;three&quot;}">

My head is ready to blow! Please help me!

Why would you have `"`? You're doing something wrong when outputting that JSON — adeneo, Sep 09 '17 at 09:17
I trying to make interactive field to store initial value and some other parameters in data attribute in JSON format. It could be a string of text with quotes in it. I need to compare this value (in JSON array) to the actual field.value and make some action in case if they are different. — Alexander Olkha, Sep 09 '17 at 09:25

score 0 · Answer 1 · answered Sep 09 '17 at 07:35

0

{"myValue":"OneTwo"three"}

The " marks the start and end of a string.

You're trying to use one in the middle of a string.

(Remember: The HTML encoding of it as " is converted to " when the HTML is parsed which is before the string is read by JS or passed to the JSON parser).

You need to escape it by putting a \ before it.

{"myValue":"OneTwo"three"}

or in HTML:

data-ia='{"myValue":"OneTwo\&quot;three"}'

The error suggests that you are generating JSON by hand instead of using a library to do it. Use a library instead, it makes life much easier.

e.g. if you were using PHP to generate it:

<?php
$ia = Array( "myValue" => 'OneTwo"three' );
$is_as_json = json_encode($ia);
$ia_as_json_for_html = htmlspecialchars($ia_as_json);
?>

<input type="text" class="input2" data-ia="<?php echo $is_as_json_for_html; ?>">

answered Sep 09 '17 at 07:35

Quentin

914,110
126
1,211
1,335

My final goal is to use this value to fill fields.value [like so](https://jsfiddle.net/tk9760sb/) and compare. but while using double escaping it places escaped value into the field.value.... – Alexander Olkha Sep 09 '17 at 09:09
I've used PHP to generate JSON, but I use Cyrillic symbols, so I have to use a custom json_encode function. – Alexander Olkha Sep 09 '17 at 09:15
The standard `json_encode` function should be perfectly capable of handling Cyrillic characters. Possibly your real problem is that [somewhere the encoding was broken](https://stackoverflow.com/questions/279170/utf-8-all-the-way-through). – Quentin Sep 10 '17 at 08:42
I will be gratefull appreciated if you will help me to figure out where. if I use a default function, I've geting {"string":"\u041f\u0440\u0438\u0432\u0435\u0442, \u041c\u0418\u0420!"} instead {"string":"Привет, МИР!"} wich is bad. Pages and databases all in UTF-8 format (utf8_genetal_ci) – Alexander Olkha Sep 12 '17 at 06:28
@AlexanderOlkha — What's the problem? That JSON decodes to the data you want when it is parsed. – Quentin Sep 12 '17 at 06:59

Rakesh Chouhan · Answer 2 · 2017-09-09T07:36:20.237

I tried your code with the following way -

html

<html>
   <body><input type="text" id="myInput" data-ia='{"myValue":"One'two'three"}'>
      <input type="text" class="input2" data-ia='{"myValue":"OneTwo\"three" id="myInput2"}'> 
   </body>
</html>

Javascript code :

var c = JSON.parse(document.getElementById('myInput').dataset.ia);
var d = JSON.parse(document.getElementById('myInput2').dataset.ia);

and it is giving me object containing myValue parameter and its value.

score -1 · Answer 3 · answered Sep 09 '17 at 07:30

Please check below code for this. It will be helpful for you.

<input type="text" class="input2" data-ia='{"ques_id":15,"ques_title":"jlkjlkjlkjljl"}'>

$( document ).ready(function() {
    var myData = $('.input2').data('ia');
    console.log(myData['ques_id']);
});

JSON data in DATASET attributes

3 Answers3