Cómo establecer el formato JSON a atributos de datos HTML5 en el jQuery

Estoy tratando estos HTMLCómo establecer el formato JSON a atributos de datos HTML5 en el jQuery

<div data-params="{a: 1, b: '2'}" id="TEST1"></div> 
<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

Luego uso de métodos de datos() en el jQuery

$('#TEST1').data('params'); //return a string 
$('#TEST2').data('params'); //return a object

Pero PRUEBA1 que no es una devolver objeto, pero una cadena, solo puede devolver el objeto TEST2. Pero quiero obtener un objeto por TEST1, ¿Cómo lo hago?

=============

Finalmente, decide escribir una función para lograr sus propias necesidades

$.fn.data2 = function(key, value) 
{ 
    if (value === undefined) 
    { 
     var data = $(this).data(key); 
     if (typeof(data) === 'string') 
     { 
      var _data = data.replace(/^[\s\r\n]*/g, '').replace(/[\s\r\n]*$/g, ''); 
      if (_data.match(/\{.*\}/) || _data.match(/\[.*\]/)) { 
       try { 
        _data = (new Function('return ' + data))(); 
        if (typeof(_data) == 'object') { 
         $(this).data(key, _data); 
         data = _data; 
        } 
       } catch(ex) {} 
      } 
     } 
     return data; 
    } 
    return $(this).data(key, value); 
};

Fuente

2011-09-14 Jasper

Pero eso trato de usar plug-in jquery.metadata es a trabajar? – Jasper

¿Hay alguna forma de que jQuery analice de la misma manera que el primer complemento HTML jquery.metadata? – Jasper

Con el fin de ser analizada como un objeto, el atributo de datos debe ser un objeto JSON bien formado.

En su caso solo necesita citar las teclas de objeto (como lo hace en el segundo objeto). Proveedores:

<div data-params='{"a": 1, "b": "2"}' id="TEST1"></div>

Para más información ver el data method docs, la parte relevante es este (el énfasis es mío):

se hará todo intento de convertir la cadena en un valor JavaScript (esto incluye booleanos , números, objetos, arrays, y null) de lo contrario se deja como una cadena ... ... Cuando el atributo de datos es un objeto (comienza con '{') o array (comienza con '['), entonces se utiliza para jQuery.parseJSON analizar la cadena; debe seguir sintaxis JSON válida, incluidos los nombres de las propiedades entre comillas.

Fuente

2011-09-14 01:36:57

+15

Por lo que vale, creo que JSON es tan estricto que incluso el uso de comillas simples en lugar de comillas dobles no es válido. – sdleihssirhc

buen punto, edición. –

¿Pero por qué trato de usar el complemento jquery.metadata para que funcione? – Jasper

se puede escapar de las comillas internas:

<div data-params="{&quot;a&quot;: 1, &quot;b&quot;: &quot;2&quot;}" id="TEST2"></div>

pero no hay nada mal con su segundo método:

<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

que me gustaría utilizar.

Fuente

2011-09-14 01:55:10 Paulpro

¿Hay alguna forma de que jQuery analice lo mismo que el primer complemento HTML jquery.metadata? – Jasper

Pruebe este. Así es como Uikit analiza los atributos de datos json. Esperamos que esto útil

function str2json(str, notevil) { 
 
    try { 
 
    if (notevil) { 
 
     return JSON.parse(str 
 
         .replace(/([\$\w]+)\s*:/g, function(_, $1){return '"'+$1+'":';}) 
 
         .replace(/'([^']+)'/g, function(_, $1){return '"'+$1+'"';}) 
 
         ); 
 
    } else { 
 
     return (new Function("", "var json = " + str + "; return JSON.parse(JSON.stringify(json));"))(); 
 
    } 
 
    } catch(e) { return false; } 
 
} 
 

 
function options(string) { 
 
    if (typeof string !='string') return string; 
 

 
    if (string.indexOf(':') != -1 && string.trim().substr(-1) != '}') { 
 
    string = '{'+string+'}'; 
 
    } 
 

 
    var start = (string ? string.indexOf("{") : -1), options = {}; 
 

 
    if (start != -1) { 
 
    try { 
 
     options = str2json(string.substr(start)); 
 
    } catch (e) {} 
 
    } 
 

 
    return options; 
 
} 
 

 
var paramsData = document.querySelectorAll('[data-params]')[0].dataset.params; 
 

 
var optionsParsed = options(paramsData); 
 

 
console.log(optionsParsed);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" 
 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
</head> 
 
<body> 
 
    <div data-params="{hello: 'world'}"></div> 
 
</body> 
 
</html>

Fuente

2016-11-29 11:49:59

Cómo establecer el formato JSON a atributos de datos HTML5 en el jQuery

Respuesta

Cuestiones relacionadas