Solución:
En lugar de almacenar todo en el atributo de datos, puede usar un identificador para acceder a los datos.
Entonces, por ejemplo, podrías hacer esto:
var myBigJsonObj = {
data1 : { //lots of data},
data2 : { //lots of data}
};
y luego tenías un html así:
<div data-dataId="data1" id="x">
Puede usar jquery para obtener los datos ahora así:
var dataId = $('#x').attr('data-dataId');
var myData = myBigJsonObj[dataId];
Este es el mejor enfoque en mi humilde opinión.
Di que quieres guardar el objeto var dataObj = { foo: 'something', bar: 'something else' }; a un atributo de datos html.
Considere primero encadenar el objeto de tal manera que tengamos
var stringifiedDataObj = JSON.stringify(dataObj);
Luego puede usar jQuery para establecer el stringifiedDataObj como el atributo de datos, por ejemplo, con el jQuery.data() API
Si bien no hay nada que le impida incrustar una cadena larga de JSON en un atributo de datos, podría decirse que la forma más “correcta” de hacerlo sería agregar un atributo de datos por propiedad de los datos JSON. p.ej:
Javascript:
var dataObj = { foo: 'something', bar: 'something else' }
HTML:
<div data-foo="something" data-bar="something else"></div>
De esta forma, cada dato en el objeto JSON corresponde a un dato independiente, accesible de forma independiente, adjunto al elemento DOM.
Tenga en cuenta que de cualquier manera tendrá que escapar de los valores que está insertando en el HTML; de lo contrario, los caracteres extraviados romperán su página.