Comment définir le format JSON pour les attributs de données HTML5 dans jQuery ?

Question

Comment définir le format JSON pour les attributs de données HTML5 dans jQuery ?

Demandé el 14 de Septembre, 2011: Quand la question a-t-elle été
16323 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'essaie ces HTML

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

Ensuite, j'utilise la méthode data() dans le jQuery

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

Mais TEST1 ce n'est pas un objet de retour, mais une chaîne de caractères, il ne peut que retourner l'objet TEST2. Mais je veux obtenir un objet par TEST1, comment faire ?

\=============

Enfin, je choisis d'écrire une fonction pour réaliser leurs propres besoins

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

Demandé el 14 de Septembre, 2011 par Jasper

Answer 1

3 Réponses

Answer 2

32voto

Pablo Fernandez Points 32003

Pour être analysé comme un objet, l'attribut de données doit être un objet JSON bien formé .

Dans votre cas, il vous suffit de citer les clés de l'objet (comme vous le faites dans le deuxième objet). Essayez :

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

Pour plus d'informations, voir le docs sur les méthodes de données La partie pertinente est celle-ci (c'est moi qui souligne) :

Tout est mis en œuvre pour convertir la chaîne en une valeur JavaScript (y compris les booléens, les nombres, les objets, les tableaux et les valeurs nulles). elle est laissée sous forme de chaîne... ...Lorsque l'attribut de données est un objet (commençant par '{' ) ou tableau (commence par '[' ) alors jQuery.parseJSON est utilisé pour analyser la chaîne de caractères ; il doit suivre la syntaxe JSON valide, y compris les noms de propriétés entre guillemets.

Répondu el 14 de Septembre, 2011 par Pablo Fernandez (32003 Points )

Answer 3

5voto

Paulpro Points 54844

Vous pouvez échapper aux guillemets intérieurs :

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

Mais il n'y a rien de mal dans votre deuxième méthode :

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

Je m'en servirais.

Répondu el 14 de Septembre, 2011 par Paulpro (54844 Points )

Answer 4

0voto

Yertay Sharipkanov Points 1

Essaie celle-là. C'est la façon dont Uikit analyse les attributs de données json. J'espère que cela vous aidera

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>

Répondu el 29 de Novembre, 2016 par Yertay Sharipkanov (1 Points )

Comment définir le format JSON pour les attributs de données HTML5 dans jQuery ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment définir le format JSON pour les attributs de données HTML5 dans jQuery ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: