JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <p id="test1" data-test='{"one":"1", "two":"2", "three":"3"}'></p>
        <p id="test2" data-test='{
            "one":"1",
            "two":"2",
            "three":"3"
        }'></p>
        <p id="test3"></p>
    </body>
</html>

JavaScript

var test1 = $('#test1').data('test');
var test2 = $('#test2').data('test');
var test3 = JSON.parse(test2);
var test4 = JSON.parse(test3);

// test1 is an object
$('#test1').text('typeof test1 is ' + typeof test1);
console.log(typeof test1);

// test2 is expected to be an object, but instead is a string
$('#test2').text('typeof test2 is ' + typeof test2);
console.log(typeof test2);

// parsing test2 results in an object
$('#test3').text('typeof test 3 is ' + typeof test3);

console.log(test3);
console.log(test4);