Come impostare il formato JSON ai dati HTML5 attributi nel jQuery

sto cercando questi HTMLCome impostare il formato JSON ai dati HTML5 attributi nel jQuery

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

allora io uso dei dati() il metodo in jQuery

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

Ma TEST1 non è un return object, ma una stringa, può solo restituire l'oggetto TEST2. Ma voglio ottenere un oggetto tramite TEST1, come posso farlo?

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

Infine, ho scelto di scrivere una funzione per raggiungere i propri bisogni

$.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); 
};

fonte

2011-09-14 Jasper

Ma perché cerco di usare plug jquery.metadata è quello di lavorare? – Jasper

C'è un modo per ottenere jQuery per analizzare lo stesso del primo plugin HTML jquery.metadata? – Jasper

Al fine di essere analizzato come un oggetto, l'attributo dei dati deve essere un oggetto JSON ben formato .

Nel tuo caso hai solo bisogno di citare i tasti oggetto (come fai nel secondo oggetto). Prova:

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

Per maggiori informazioni vedere il data method docs, la parte rilevante è questo uno (sottolineatura mia):

Ogni tentativo è fatto per convertire la stringa in un valore JavaScript (questo include booleani , numeri, oggetti, matrici e null) altrimenti è lasciato come una stringa ... ... Quando l'attributo dati è un oggetto (inizia con '{') o matrice (inizia con '[') quindi jQuery.parseJSON viene utilizzato per analizzare la stringa; deve seguire la sintassi JSON valida compresi i nomi delle proprietà citate.

fonte

2011-09-14 01:36:57

+15

Per quello che vale, penso che JSON sia così rigoroso che anche l'uso di virgolette singole invece di virgolette non è valido. – sdleihssirhc

buon punto, modifica. –

Ma perché provo a utilizzare il plug-in jquery.metadata per funzionare? – Jasper

si può sfuggire le virgolette interne:

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

ma non c'è niente di sbagliato con il secondo metodo:

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

vorrei usare quella.

fonte

2011-09-14 01:55:10 Paulpro

C'è un modo per far analizzare jQuery come il primo plug-in HTML jquery.metadata? – Jasper

Prova questo. È come l'attributo dei dati di analisi Uikit json. Spero che questo sarà utile

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>

fonte

2016-11-29 11:49:59

Come impostare il formato JSON ai dati HTML5 attributi nel jQuery

risposta

Problemi correlati