JSFiddle - React, Tailwind, and code Playground

HTML

<!-- generally, this is wrong -->
<div data-name='"joe"'  ></div>


<!-- but this should be addressed -->
<pre>
// assume this...
$info_obj = json_encode(
              array(
                'first' => 'Joe', 
                'last'  => 'Smith'
              )
            );

// This would easily be output from an existing application
//&lt;div data-info="&lt;?php echo $info_obj ?&gt;"&gt;double&lt;/div&gt;

// Rarely are single quotes used, but this is valid
//&lt;div data-info='&lt;?php echo $info_obj ?&gt;'&gt;single&lt;/div&gt;
</pre>

<!-- This obviously doesnt work, as its invalid -->
<div data-info="{"first":"Joe","last":"Smith"}">double</div>

<!-- This is just kind of a bummer, but works -->
<div data-info='{"first":"Joe","last":"Smith"}'>single</div>

JavaScript

var $div    = $('div'), 
    $string = $div.eq(0),
    $double = $div.eq(1), 
    $single = $div.eq(2);


console.log([ 
    $string.data( 'name' ) 
] );
// > [""joe""]

console.log([ 
    $double.data( 'info' )
] );
// > ["{"]

console.log([ 
    $single.data( 'info' )
] );
// > [ Object ]