À l'époque de XHTML/HTML4, les développeurs ne disposaient que de quelques options qu'ils pouvaient utiliser pour stocker des données arbitraires liées au DOM. Vous pourriez inventer vos propres attributs, mais cela était risqué : votre code ne serait pas valide, les navigateurs pourraient ignorer vos données et cela pourrait causer des problèmes si le nom correspondait aux attributs HTML standard.

Par conséquent, la plupart des développeurs s'en sont tenus aux attributs class ou rel car ils constituaient le seul moyen raisonnable de stocker des lignes supplémentaires. Par exemple, disons que nous créons un widget pour afficher des messages comme une chronologie de messages Twitter. Idéalement, JavaScript devrait être configurable sans avoir à réécrire le code, nous définissons donc l'ID utilisateur dans l'attribut class, comme ceci :

Notre code JavaScript recherchera un élément avec l'ID msglist . À l'aide du script, nous rechercherons les classes commençant par user_ , et « bob » dans notre cas sera l'ID utilisateur, et nous afficherons tous les messages de cet utilisateur.

Supposons que nous souhaitions également définir un nombre maximum de messages et ignorer les messages datant de plus de six mois (180 jours) :

Notre attribut de classe s'encombre très rapidement - il est plus facile de faire une erreur et l'analyse des chaînes en JavaScript devient de plus en plus difficile.

Attributs des données HTML5

Heureusement, HTML5 a introduit la possibilité d'utiliser des attributs personnalisés. Vous pouvez utiliser n'importe quel nom minuscule préfixé par data- , par exemple :

Attributs de données personnalisés :

• ce sont des chaînes - vous pouvez y stocker toutes les informations qui peuvent être représentées ou codées sous forme de chaîne, comme JSON. La conversion de type doit être effectuée à l'aide de JavaScript
• doit être utilisé dans les cas où il n'y a pas d'éléments ou d'attributs HTML5 appropriés
• se référer uniquement à la page. Contrairement aux microformats, ils doivent être ignorés par les systèmes externes tels que les moteurs de recherche et les robots d'exploration.

Exemple de traitement JavaScript n° 1 : getAttribute et setAttribute

Tous les navigateurs vous permettent d'obtenir et de modifier les attributs des données à l'aide des méthodes getAttribute et setAttribute :

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Cela fonctionne, mais ne doit être utilisé que pour maintenir la compatibilité avec les anciens navigateurs.

Exemple n°2 de traitement en JavaScript : la méthode data() de la bibliothèque jQuery

Depuis jQuery 1.4.3, la méthode data() gère les attributs de données HTML5. Vous n'avez pas besoin de spécifier explicitement le préfixe data-, donc un code comme celui-ci fonctionnera :

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

Cependant, sachez que jQuery tente de convertir les valeurs de ces attributs en types appropriés (booléens, nombres, objets, tableaux ou null) et affectera le DOM. Contrairement à setAttribute , la méthode data() ne remplacera pas physiquement l'attribut data-list-size - si vous vérifiez sa valeur en dehors de jQuery - elle sera toujours 5.

Exemple n°3 de traitement JavaScript : API pour travailler avec des ensembles de données

Enfin, nous avons une API pour travailler avec des ensembles de données HTML5 qui renvoie un objet DOMStringMap. Il est important de se rappeler que les attributs de données sont mappés à un objet sans préfixes de données, que les traits d'union sont supprimés des noms et que les noms eux-mêmes sont convertis en camelCase, par exemple :

Nom d'attribut	Nom de l'API de l'ensemble de données
utilisateur de données	utilisateur
données-maxage	maximum
taille de la liste de données	listeTaille

Notre nouveau code :

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Cette API est prise en charge par tous les navigateurs modernes, mais pas par IE10 et versions antérieures. Il existe une solution de contournement pour ces navigateurs, mais il est probablement plus pratique d'utiliser jQuery si vous écrivez pour des navigateurs plus anciens.

22 réponses

Qualifications

JavaScript n'a qu'un seul type de données pouvant contenir plusieurs valeurs : Objet. Un tableau est une forme particulière d'objet.

(Plain) Les objets ressemblent

(clé : valeur, clé : valeur, ...)

Les tableaux ont la forme

Les tableaux et les objets affichent une structure clé -> valeur. Les clés d'un tableau doivent être numériques, alors que n'importe quelle chaîne peut être utilisée comme clé dans les objets. Une paire clé-valeur est également appelée « propriétés ».

Les propriétés sont accessibles soit en utilisant la notation par points

Valeur const = obj.someProperty ;

ou une notation si le nom de la propriété ne serait pas un nom d'identifiant JavaScript valide, ou si le nom est la valeur de la variable :

// l'espace n'est pas un caractère valide dans les noms d'identifiant const value = obj["some Property"]; // nom de la propriété en tant que variable const name = "some Property" ; valeur const = obj ;

Pour cette raison, les éléments du tableau ne sont accessibles qu'à l'aide de parenthèses :

Valeur const = arr ; // arr.5 serait une erreur de syntaxe // nom de propriété/index en tant que variable const x = 5 ; valeur const = arr[x];

Attendez... et JSON ?

JSON est une représentation textuelle de données, comme XML, YAML, CSV et autres. Pour travailler avec de telles données, vous devez d'abord les convertir en types de données JavaScript, c'est-à-dire des tableaux et des objets (et comme expliqué). Comment analyser JSON est expliqué dans la question Parse JSON in JavaScript ? .

Matériel de lecture supplémentaire

Comment accéder aux tableaux et aux objets est une connaissance fondamentale de JavaScript, et il est donc recommandé de lire le Guide JavaScript MDN, en particulier les sections

Accès aux structures de données imbriquées

Une structure de données imbriquée est un tableau ou un objet qui se rapporte à d'autres tableaux ou objets, c'est-à-dire ses valeurs sont des tableaux ou des objets. De telles structures peuvent être obtenues en appliquant un point ou un support séquentiellement.

Voici un exemple :

Const data = ( code : 42, éléments : [( id : 1, nom : "foo" ), ( id : 2, nom : "bar" )] );

Disons que nous voulons accéder au nom du deuxième élément.

Voici comment procéder étape par étape :

Comme nous pouvons le voir, les données sont un objet, nous pouvons donc accéder à ses propriétés en utilisant la notation par points. La propriété items est accessible comme suit :

Éléments de données

La valeur est un tableau, pour accéder à son deuxième élément il faut utiliser la notation entre parenthèses :

Éléments de données

Cette valeur est un objet et nous utilisons à nouveau la notation par points pour accéder à la propriété name. On se retrouve donc avec :

Const item_name = data.items.name;

Alternativement, nous pourrions utiliser une notation pour n'importe laquelle des propriétés, surtout si le nom contenait des caractères qui le rendraient invalide pour l'utilisation de la notation par points :

Const item_name = data["items"]["name"];

J'essaie d'accéder à une propriété mais je ne reçois qu'un retour indéfini ?

Dans la plupart des cas, lorsque vous obtenez undefined , l'objet/le tableau n'a tout simplement pas de propriété portant ce nom.

Const foo = (bar : (baz : 42)); console.log(foo.baz); // indéfini

Au lieu de for...in avec hasOwnProperty, vous pouvez utiliser Object.keys pour obtenir un tableau de noms de propriétés :

Object.keys(data).forEach(function(prop) ( // `prop` est le nom de la propriété // `data` est la valeur de la propriété ));

Tableaux

Pour parcourir tous les éléments du tableau data.items, nous utilisons une boucle for :

Pour (soit i = 0, l = data.items.length; i< l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`. }

Il est également possible d'utiliser for...in pour parcourir les tableaux, mais il y a des raisons pour lesquelles cela devrait être évité : pourquoi "for (var element in list)" avec des tableaux est-il considéré comme une mauvaise pratique en JavaScript ? .

Avec la prise en charge croissante par les navigateurs d'ECMAScript 5, la méthode tableau forEach devient une alternative intéressante :

Data.items.forEach(function(value, index, array) ( // Le rappel est exécuté pour chaque élément du tableau. // `value` est l'élément lui-même (équivalent à `array`) // `index` sera être l'index de l'élément dans le tableau // `array` est une référence au tableau lui-même (c'est-à-dire `data.items` dans ce cas) ));

Dans les environnements prenant en charge ES2015 (ES6), vous pouvez également utiliser une boucle for...of, qui fonctionne non seulement pour les tableaux, mais pour tout itérable :

For (élément const de data.items) ( // `item` est l'élément du tableau, **pas** l'index)

Dans chaque itération, for...of nous donne directement l'élément suivant de l'itération, il n'y a pas d'"index" auquel accéder ou utiliser.

Que dois-je faire si la « profondeur » de la structure des données m’est inconnue ?

En plus des clés inconnues, la « profondeur » d'une structure de données (par exemple le nombre d'objets imbriqués) peut également être inconnue. La manière d’accéder aux propriétés profondément imbriquées dépend généralement de la structure exacte des données.

Mais si la structure des données contient des modèles répétitifs, par ex. Représentation arborescente binaire, la solution implique généralement d'accéder de manière récursive à chaque niveau de la structure de données.

Voici un exemple pour obtenir le premier nœud feuille d'un arbre binaire :

Fonction getLeaf(node) ( if (node.leftChild) ( return getLeaf(node.leftChild); // x > 0)) // false, car 3^2 est supérieur à 5 console.log(arr.every(x = > Math.pow(x, 2)< 5)) // true, because 2 is even (the remainder from dividing by 2 is 0) console.log(arr.some(x =>x % 2 === 0)) // faux, car aucun des éléments n'est égal à 5 ​​console.log(arr.some(x => x === 5))

Array.prototype.find() et Array.prototype.filter()

Les méthodes find() renvoient le premier élément qui satisfait à la fonction de rappel fournie. La méthode filter() renvoie un tableau de tous les éléments satisfaits par la fonction de rappel fournie.

Const arr = // 2, car 2^2 !== 2 console.log(arr.find(x => x !== Math.pow(x, 2))) // 1, car c'est le premier élément console .log(arr.find(x => true)) // non défini, car aucun des éléments n'est égal à 7 console.log(arr.find(x => x === 7)) // , car ces éléments sont plus grands supérieur à 1 console.log(arr.filter(x => x > 1)) // , car la fonction renvoie true pour tous les éléments console.log(arr.filter(x => true)) // , car aucun des éléments elements n'est égal ni à 6 ni à 7 console.log(arr.filter(x => x === 6 || x === 7))

Array.prototype.map()

La méthode map() renvoie un tableau avec les résultats de l'appel de la fonction de rappel fournie sur les éléments du tableau.

Const arr = console.log(arr.map(x => x + 1)) // console.log(arr.map(x => String.fromCharCode(96 + x))) // ["a", " b", "c"] console.log(arr.map(x => x)) // (sans opération) console.log(arr.map(x => Math.pow(x, 2))) / / console.log(arr.map(String)) // ["1", "2", "3"]

Tableau.prototype.reduce()

La méthode réduire() réduit le tableau à une seule valeur en appelant la fonction de rappel fournie avec deux éléments.

Const arr = // Somme des éléments du tableau. console.log(arr.reduce((a, b) => a + b)) // 6 // Le plus grand nombre du tableau. console.log(arr.reduce((a, b) => a > b ? a: b)) // 3

La méthode réduire() prend un deuxième paramètre facultatif, qui est la valeur initiale. Ceci est utile lorsque le tableau sur lequel vous appelez réduire() peut avoir zéro ou un élément. Par exemple, si nous voulions créer une fonction sum() qui prend un tableau comme argument et renvoie la somme de tous les éléments, nous pourrions l'écrire comme ceci :

Const sum = arr => arr.reduce((a, b) => a + b, 0) console.log(sum()) // 0 console.log(sum()) // 4 console.log(sum ()) // 7

Cette question est assez ancienne, tout comme la mise à jour moderne. Avec l'arrivée d'ES2015, il existe des alternatives pour obtenir les données requises. Il existe actuellement une fonctionnalité appelée déstructuration d'objets pour accéder aux objets imbriqués.

const data = ( code : 42, éléments : [( id : 1, nom : "foo" ), ( id : 2, nom : "bar" )] ); const ( éléments : [, ( nom : secondName )] ) = données ; console.log(secondName);

L'exemple ci-dessus crée une variable appelée secondName à partir du nom de clé d'un tableau appelé items, le seul dit ignore le premier objet du tableau.

Notamment, c'est probablement trop grand pour cet exemple puisqu'un simple tableau d'accès est plus facile à lire, mais il sera utile pour séparer les objets en général.

Ceci est une très brève introduction à votre cas d'utilisation spécifique, la déstructuration peut être une syntaxe étrange à laquelle il faut s'habituer. Je vous recommande de lire la documentation Mozilla Destructuring Assignment pour en savoir plus.

Pour accéder à un attribut imbriqué, vous devez spécifier son nom puis rechercher l'objet.

Si vous connaissez déjà le chemin exact, vous pouvez le coder en dur dans votre script comme ceci :

Données["éléments"]["nom"]

ça marche aussi -

Data.items.name data["items"].name data.items["name"]

Lorsque vous ne connaissez pas le nom exact à l’avance ou que l’utilisateur vous le fournit. Une recherche dynamique dans la structure des données est alors nécessaire. Certains ont suggéré que la recherche pourrait être effectuée à l'aide d'une boucle for, mais il existe un moyen très simple de parcourir le chemin à l'aide de Array.reduce.

Const data = ( code : 42, éléments : [( id : 1, nom : "foo" ), ( id : 2, nom : "bar" )] ) const path = [ "éléments", "1", "nom "] let result = path.reduce((a,v) => a[v], data)

Path est une façon de dire : prenez d’abord l’objet avec les éléments clés, qui se trouve être un tableau. Ensuite, prenez 1 élément -st (0 tableaux d'index). Enfin, prenez l'objet avec le nom key dans cet élément du tableau, qui est la chaîne bar .

Si vous avez un chemin très long, vous pouvez même utiliser String.split pour rendre le tout plus facile -

"items.1.name".split(".").reduce((a,v) => a[v], données)

Il s'agit simplement de JavaScript, sans utiliser de bibliothèques tierces comme jQuery ou lodash.

Utiliser JSONPath sera l'une des solutions les plus flexibles si vous souhaitez inclure la bibliothèque : https://github.com/s3u/JSONPath (nœud et navigateur)

Pour votre cas d'utilisation, le chemin json est :

$..articles.nom

Var secondName = jsonPath.eval(data, "$..items.name");

Var ourStorage = ( "desk": ( "tiroir": "agrafeuse" ), "cabinet": ( "tiroir supérieur": ( "dossier1": "un fichier", "dossier2": "secrets" ), "tiroir du bas ": "un soda" ) ); ourStorage.cabinet["tiroir supérieur"].folder2; // Sorties -> "secrets"

//parent.subParent.subsubParent["presque là"]["propriété finale"]

Fondamentalement, utilisez un point entre chaque enfant qui se développe en dessous, et lorsque vous avez des noms d'objet de deux lignes, vous devez utiliser la notation ["obj Name"]. Sinon, un point suffit ;

Ajoutons que l'accès aux tableaux imbriqués se fera comme ceci :

Var ourPets = [ ( animalType : "cat", noms : [ "Meowzer", "Fluffy", "Kit-Cat" ] ), ( animalType : "dog", noms : [ "Spot", "Bowser", "Frankie " " ] ) ] ; nosPets.names; // Sortie "Fluffy" ourPets.names; // Sorties "Spot"

Un autre document utile décrivant la situation ci-dessus : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

Accès à la propriété à l'aide de la marche par points : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

Si vous recherchez un ou plusieurs objets répondant à certains critères, vous disposez de plusieurs options en utilisant query-js

// renverra tous les éléments avec un identifiant supérieur à 1 data.items.where(function(e)(return e.id > 1;)); // renverra le premier élément avec un identifiant supérieur à 1 data.items.first(function(e)(return e.id > 1;)); //renverra le premier élément avec un identifiant supérieur à 1 //ou le deuxième argument si aucun élément n'est trouvé data.items.first(function(e)(return e.id > 1;),(id:-1,name :""));

Il existe également des single et singleOrDefault, ils fonctionnent respectivement de la même manière que first et firstOrDefault. La seule différence est qu'ils lanceront si plus d'une correspondance est trouvée.

pour plus d'explications sur query-js, vous pouvez partir de ce post

Vieille question, mais comme personne n'a mentionné lodash (juste un trait de soulignement).

Si vous utilisez déjà lodash dans votre projet, je pense que c'est une façon élégante de le faire dans un exemple complexe :

Get(response, ["output", "fund", "data", "0", "children", "0", "group", "myValue"], "")

le même que:

Réponse.output.fund.data.children.group.myValue

La différence entre la première et la deuxième option est que dans Optim 1, si vous avez l'une des propriétés manquantes (non définies) dans le chemin, vous n'obtiendrez pas d'erreur, il vous renvoie le troisième paramètre.

Pour le filtre de tableau lodash, il existe _.find() , mais je préférerais utiliser filter() normal. Mais je trouve toujours la méthode _.get() ci-dessus très utile lorsque vous travaillez avec des données vraiment complexes. J'ai rencontré des API très complexes dans le passé et c'était pratique !

J'espère que cela pourra être utile à ceux qui recherchent des options pour gérer les données vraiment complexes qu'implique le titre.

Qu'est-ce qu'une bibliothèque JavaScript qui fournit tout un tas d'aides à la programmation fonctionnelle utiles sans étendre aucun des objets intégrés.

Solution : var data = ( code : 42, éléments : [( id : 1, nom : "foo" ), ( id : 2, nom : "bar" )] ); var item = _.findWhere(data.items, ( id: 2 )); if (!_.isUndefined(item)) ( console.log("NAME =>", item.name); ) //utilisation de find - var item = _.find(data.items, function(item) ( élément de retour .id === 2; )); if (!_.isUndefined(item)) ( console.log("NAME =>", item.name); )

Accès à un objet dynamiquement multi-niveaux.

Var obj = ( nom : "salut", subobj : ( subsubobj : ( noms : "Je suis sous sous obj" ) ) ); var niveau = "subobj.subsubobj.names"; niveau = niveau.split("."); var currentObjState = obj; pour (var je = 0; je< level.length; i++) { currentObjState = currentObjState]; } console.log(currentObjState);

Avant HTML5, travailler avec des attributs dans des éléments HTML n'était pas amusant, c'est un euphémisme. J'ai dû utiliser des attributs comme rel ou class . Et certains développeurs ont même créé leurs propres attributs.

Mais les choses ont radicalement changé lorsque HTML5 nous a donné la possibilité d'utiliser ses attributs de données. Vous pouvez désormais enregistrer assez facilement des données supplémentaires à l'aide d'outils standard.

Comment fonctionnent les attributs de date ?

Le nom parle de lui-même. Les attributs de date stockent certaines données spécifiées par vous. Ils commencent toujours par le préfixe data- et se terminent par quelque chose de plus compréhensible pour le développeur (selon la spécification, seuls les caractères minuscules et les tirets sont autorisés). Un élément peut contenir n'importe quel nombre d'attributs de date.

Un exemple d'utilisation d'attributs pour stocker les données utilisateur :

Calvin

Bien sûr, ces données ne sont pas très utiles à l'utilisateur final, puisqu'il ne les voit tout simplement pas, mais les attributs de date sont très largement utilisés dans les technologies Web modernes.

Voici un exemple de bouton pour supprimer quelque chose sur votre page :

Supprimer

Tous les paramètres nécessaires sont à portée de main et prêts à être envoyés au script backend. Plus d'attributs rel, de gestion d'ID ou d'action requise à partir d'autres attributs.

Que peut-on stocker ?

Il n’y a qu’une seule règle à retenir : les objets ne peuvent pas être stockés dans des attributs de date. Autrement dit, c'est possible s'ils sont d'abord sérialisés. Pour l’instant, rappelez-vous simplement qu’en principe, vous ne pouvez stocker que des données sous forme de chaîne.

Attributs de lecture/écriture à l'aide de javascript

Revenons à l'exemple du bouton et voyons comment nous pouvons accéder aux attributs requis.

// Ceci est un bouton var bouton = document.getElementById("your-button-id"); // Récupère la valeur var cmd = bouton.getAttribute("data-cmd"); var id = bouton.getAttribute("data-id"); // Change la valeur bouton.setAttribute("data-cmd", yourNewCmd); bouton.setAttribute("data-id", votreNewId);

Assez simple, non ? Maintenant, transmettez simplement les paramètres cmd et id à votre application et effectuez la requête ajax nécessaire.

Attributs de date en lecture/écriture à l'aide de jQuery.

Voici un analogue dans jQuery :

// Récupère la valeur var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#votre-bouton-id").attr("data-id"); // Modifiez la valeur $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

A ne pas confondre avec la méthode data(). Bien qu’ils aient certaines choses en commun, ce sont en général des choses complètement différentes. Même si vous n'êtes pas complètement familier avec ces méthodes, utilisez simplement attr() .

Utilisation de l'API de l'ensemble de données

HTML5 nous propose même une API pour travailler avec les attributs de données, bien qu'IE10 et versions antérieures ne la prennent pas en charge.

Encore une fois, un exemple avec un bouton, mais cette fois en utilisant l'API du jeu de données :

// Ceci est un bouton var bouton = document.getElementById("your-button-id"); // Récupère la valeur var cmd = bouton.dataset.cmd; var id = bouton.dataset.id; // Change la valeur bouton.dataset.cmd = yourNewCmd; bouton.dataset.id = votreNewId ;

Veuillez noter l'absence de préfixe de données et de tirets. Tout comme lorsque vous travaillez avec des propriétés CSS en JavaScript, vous aurez besoin du cas "à bosse". L'API Dataset traduit les noms d'attributs afin que data-some-attribute-name en HTML devienne dataset.someAttributeName en JavaScript.

Que pouvez-vous faire avec les attributs de date ?

Les exemples donnés ne sont que la base. Vous pouvez effectuer des opérations beaucoup plus complexes avec des attributs de date. Regardons quelques exemples.

Filtration

Disons que vous travaillez avec une liste d'éléments et que vous devez les filtrer par mot-clé. Placez les mots-clés dans les attributs de données et utilisez un petit script itératif pour les traiter.

• Gué
• Chevrolet
...

Exemple « à genoux » :

$("#filter").on("keyup", function() ( var mot-clé = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(this).toggle(mot-clé.longueur< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

Stylisation

Bien sûr, il est préférable d'appliquer des styles à l'aide de classes, mais la même chose peut être faite à l'aide d'attributs de données. C'est ainsi que vous pouvez appliquer un style aux éléments possédant un attribut de données spécifique, quelle que soit sa valeur. Regardons d'abord le code HTML :

Et maintenant le CSS :

(fond : rouge ; )

Mais comment prendre en compte la valeur d’un attribut ? Voici comment appliquer un style à tous les éléments avec un attribut data-warning dont la valeur contient le mot error :

( La couleur rouge; )

Paramètres

Le célèbre framework Bootstrap utilise des attributs de données pour configurer ses plugins JavaScript. Exemple de pop-up :

Popover en haut

La meilleure façon de stocker des données

Les attributs de date sont très courants dans les technologies Web. Mais le plus important est qu'ils sont entièrement pris en charge par les anciens navigateurs et pénètrent de plus en plus profondément dans les standards du Web. Et comme le standard HTML a déjà été approuvé, vous pouvez travailler avec eux aujourd'hui et ne pas avoir peur qu'ils disparaissent soudainement demain.

La méthode data dans jQuery nous donne la possibilité de lier des données arbitraires à n'importe quel document ou objet javaScript, nous permettant ainsi de rendre votre code plus concis et lisible. À partir de jQuery 1.4.3, il est devenu possible d'utiliser cette méthode sur des objets javaScript, ainsi que de suivre les modifications apportées à ces données.

Les bases

Pour commencer, vous pouvez appeler la méthode data sur un objet jQuery, et vous pouvez également utiliser directement la fonction $.data().

// Utilisation de la méthode : $("#myDiv").data("key","arbitrary value"); // Utilisation directe de la fonction : $.data($("#myDiv").get(0),"key","arbitrary value");

La fonction data est l'implémentation de bas niveau qui est réellement utilisée lors de l'appel de la méthode. La méthode objet jQuery est beaucoup plus pratique et vous permet également de vous inclure en tant que chaîne d'appels.

Notez également que vous devez transmettre un élément DOM comme premier paramètre à la fonction $.data, et non un objet jQuery.

Une méthode objet nécessite deux paramètres : une clé et une valeur. La clé est une constante de chaîne et la valeur est n'importe quelle structure de données, y compris les fonctions et objets de tableau. Il existe une syntaxe alternative dans laquelle vous pouvez transmettre un objet en tant que paramètre unique :

// Vous pouvez passer un objet : $("#myDiv").data(("name":"Stevie","age":21)); // Même chose : $("#myDiv").data("name","Stevie").data("age",21);

Désormais, si vous avez besoin de récupérer les données stockées, vous pouvez appeler la fonction data en lui passant la clé en paramètre :

Var theValue = $("#myDiv").data("age"); // 21

L'accès à ces données est disponible n'importe où dans le script. Vous recevrez les données stockées tant que l'élément récupéré par le sélecteur donné existe.

Var theValue = $("div:first").data("name"); // Stevie $("div:first").click(function())( alert($(this).data("age"); // 21 ));

jQuery 1.4.3 prend également en charge les données HTML5 stockées dans les attributs. Cela signifie que si vous avez un élément déclaré comme ceci :

Dans ce cas, vous pouvez obtenir les données de l'attribut data-internal-id en appelant la méthode $("#img1").data("internal-id"), ce qui est certainement pratique pour les requêtes AJAX.

Utiliser la méthode data sur des objets JavaScript

Vous pourriez être surpris, mais la méthode data peut également être utilisée sur des objets JavaScript classiques. Cette fonctionnalité a été officiellement introduite dans jQuery 1.4.3.

Var monObj = (); $(myObj).data("city","Springfield");

L'exemple ci-dessus crée en fait une propriété city pour l'objet donné. Pourquoi ne pas simplement écrire myObj.city = "Springfield" dans ce cas ? La différence est que la méthode data ajoute plusieurs événements utiles à l'objet, ce qui facilite le travail avec cet objet. Par exemple:

Var progressBar = (); $(progressBar).bind("setData",function(e,key,value)( switch(key)( case "percent": $("#progress").width(value+"%"); $("# percentText").text(value+"%"); break; case "color": $("#progress").css("color",value); break; case "enabled": $("#progress") .toggleClass("actif",valeur); $(progressBar).data("enabled",true).data("percent",21).data("color","green"); console.log(progressBar.enabled);

Dans l'exemple ci-dessus, nous utilisons la méthode data pour créer une API simple avec laquelle nous pouvons mettre à jour un élément.

Il existe deux autres événements qui peuvent être utilisés sur un objet javaScript :

• getData - se déclenche avant de lire les données. Vous pouvez l'utiliser pour prétraiter les données reçues. Par exemple, pour recalculer une valeur.
• changeData - se déclenche lorsque les données sont définies ou modifiées. Cet événement est utilisé dans le plugin jQuery datalink. Avec lui, vous pouvez lier les données du formulaire à un objet javaScript et travailler avec les champs de formulaire en tant que propriétés de l'objet.

Dans les coulisses

jQuery crée un objet vide (pour les curieux, il s'appelle $.cache) qui est le magasin de toutes les valeurs que vous enregistrez à l'aide de la méthode data. Chaque élément du DOM utilisé avec la méthode data se voit attribuer un identifiant unique, qui est alors la clé pour accéder aux données dans l'objet $.cache.

jQuery stocke non seulement les données utilisateur dans ce cache, il stocke également les données internes, les gestionnaires d'événements que vous attachez à l'aide des fonctions live(), bind() et délégué(). L'utilisation d'un magasin central rend jQuery plus fiable.

Conclusion

La méthode des données n'est que l'une des nombreuses fonctionnalités de jQuery qui facilitent la vie des développeurs Web. Combiné avec les autres fonctionnalités de la bibliothèque, il ajoute une base solide sur laquelle nous pouvons nous appuyer.

Un article dans lequel nous examinerons quelles méthodes existent dans jQuery pour travailler avec les attributs de données et le stockage interne des données.

Objectif des attributs de données HTML 5

En HTML5, vous pouvez ajouter des attributs personnalisés à n'importe quel élément du document. Le but de ces attributs est déterminé indépendamment par le développeur Web, mais dans la plupart des cas, ils sont destinés à stocker certaines informations, qui peuvent ensuite être utilisées dans des scripts JavaScript. Les attributs personnalisés commencent toujours par data-* :

Travailler avec des attributs de données à l'aide des méthodes attr et removeAttr

L'exécution d'actions sur les attributs de données dans jQuery se fait généralement à l'aide des méthodes attr et removeAttr.

// récupère la valeur de l'attribut data du premier élément de l'ensemble actuel $("selector").attr("data-*"); // ajoute ou modifie la valeur de l'attribut data pour tous les éléments sélectionnés $("selector").attr("data-*","value"); // supprime la valeur de l'attribut data de tous les éléments trouvés 1 manière - en utilisant attr $("selector").attr("data-*",null); Méthode 2 - en utilisant RemoveAttr $("selector").removeAttr("data-*");

Par exemple, affichons la valeur des attributs data de l'élément div avec id="phone-1" sur la console du navigateur :

// récupère les valeurs des attributs de données var phoneInfo = "Name: " + $("#phone-1").attr("data-name") + "; Price: " + $("#phone- 1"). attr("prix-données"); // affiche les valeurs sur la console console.log(phoneInfo);

Cette méthode (attr) renvoie la valeur de l'attribut data sous forme de chaîne.

Par exemple, ajoutons l'attribut data-year à l'élément ci-dessus :

$("#phone-1").attr("année-données", 2016);

Vous pouvez comprendre plus en détail comment utiliser ces méthodes dans l'article jQuery - Travailler avec les attributs des éléments HTML.

jQuery - attributs de données et méthode de données

La méthode data n'est pas utilisée dans jQuery pour communiquer avec les attributs de données. Son objectif principal est de lire les données du stockage interne de jQuery ($.cache) ou d'y écrire des informations.

Le stockage interne de jQuery est une sorte de conteneur dans lequel vous pouvez placer des informations arbitraires associées à un élément DOM spécifique de la page actuelle.

Néanmoins, cette méthode peut lire les attributs des données HTML5 et les placer dans le stockage interne. Cela ne se produit que s'il n'y a pas de clé dans le magasin jQuery avec un nom égal au nom de l'attribut de données. Sinon, vous obtiendrez la valeur du stockage $.cache.

Ainsi, travailler avec des attributs de données à l'aide de la méthode data n'a de sens que si un travail ultérieur avec eux sera effectué via le magasin jQuery.

Un exemple dans lequel nous verrons comment la méthode data fonctionne avec l'attribut data :

// cette action placera l'attribut de données de prix dans le stockage (s'il n'y est pas) $("#book-1").data("price"); //valeur 420 roubles. // modifie la valeur de l'attribut de données de prix de l'élément en utilisant attr $("#book-1").attr("data-price","513 rub."); // lit la valeur du prix (puisque cette valeur est dans le stockage $.cache, elle en sera extraite) $("#book-1").data("price"); //valeur 420 roubles. // supprime la clé de prix, associée à l'élément book-1, du stockage $("#book-1").removeData("price"); // lit la valeur du prix (puisque cette valeur n'est pas dans le stockage jQuery, elle sera extraite de l'attribut data et placée dans $.cache) $("#book-1").data("price"); //valeur 513 frotter.

Dans la méthode data, la clé correspond au nom de l'attribut data sans le préfixe data-.

// si l'élément div avec id="pencil" n'a pas de clé de couleur dans le magasin jQuery, alors lisez la valeur de l'attribut data-pencil et placez sa valeur dans $.cache $("#pencil").data ("couleur");

De plus, si la fin du nom de l'attribut de données (après data-) contient des tirets ("-"), alors lors de l'accès à l'aide de la méthode data, les lettres précédant le trait d'union doivent être remplacées par des lettres majuscules et les tirets eux-mêmes doivent être retiré. Par exemple, le nom d'attribut data-last-name doit être spécifié dans la méthode de données sous la forme lastName .

Une autre chose à propos de l'utilisation de la méthode data est que lorsque jQuery analyse la valeur d'un attribut de données, il essaie de convertir sa valeur (chaîne) en type JavaScript approprié (booléen, nombre, objet, tableau ou null). Par exemple, la valeur "420" est convertie en nombre 420. Si la valeur de l'attribut data est un objet (commençant par "(") ou un tableau (commençant par "["), alors jQuery utilise la méthode parseJSON pour analyser la valeur. Cela signifie que le contenu de l'attribut doit avoir une syntaxe JSON valide (y compris la spécification des noms de propriété entre guillemets doubles). Mais si une tentative d'analyse de la valeur de l'attribut data échoue, elle restera dans sa forme originale (c'est-à-dire , sous forme de chaîne).

En résumé, la méthode data permet d'effectuer les opérations suivantes (en fonction des arguments spécifiés) :

1. Récupération de la valeur de la clé associée à un élément depuis le stockage interne de jQuery :

$("sélecteur").data("clé");

Cette variante de la méthode des données effectue l'une des opérations suivantes :

• Lire l'attribut data (dont le nom correspond à la clé spécifiée) à partir du premier élément de l'ensemble actuel, le placer en stockage et renvoyer la valeur de cette clé comme résultat. Cette méthode effectue cette action uniquement si l'élément a un élément de données correspondant à la clé et que dans le conteneur $.cache, cet élément n'a pas d'entrée avec la clé spécifiée.
• Obtient la valeur de la clé spécifiée à partir du stockage jQuery. La méthode data effectue cette action uniquement si l'élément possède la clé spécifiée dans $.cache.
• renvoie un objet non défini ou vide si aucune des opérations ci-dessus n'est effectuée.

Si $("selector") renvoie plusieurs éléments, cette méthode renvoie uniquement le premier élément de l'ensemble résultant.

2. Récupération de toutes les données en tant qu'objet JavaScript du magasin jQuery associé à l'élément spécifié :

// la méthode data est appelée sans arguments $("selector").data();

Plus en détail, cette variante de la méthode des données effectue les opérations suivantes :

Place automatiquement les attributs de données dans le stockage interne de jQuery. Il effectue cette action uniquement pour les attributs de données dont les noms (clés) ne figurent pas actuellement dans le magasin jQuery.

Renvoie un objet composé de paires clé-valeur associées à l'élément actuel.

3. La méthode data est utilisée non seulement pour lire des valeurs, mais également pour écrire des données (valeur-clé) associées à un élément DOM dans le stockage interne de jQuery.

// Option 1 (enregistre la paire clé-valeur spécifiée pour chaque élément sélectionné) : $("selector").data(key, value); // clé (chaîne) // valeur (données de tout type) // Option 2 (définir un ensemble de paires clé-valeur (objet) pour tous les éléments trouvés) : $("selector").data(obj); // obj est un objet JavaScript contenant des paires clé-valeur

Un exemple de travail avec la méthode data :

//place la clé de prix avec une valeur de 550 dans le stockage jQuery $("#book-js").data("price",550); // lit les informations associées à l'élément #book-js depuis le magasin (en plaçant automatiquement l'attribut de données de nom dans le magasin) $("#book-js").data(); // récupère la valeur de la clé de prix de l'élément #book-js $("#book-js").data("price"); // 550 // récupère la valeur de la clé de prix de l'élément #book-js $("#book-js").data("name"); // "JavaScript"

Méthodes pour travailler avec le stockage de données jQuery

Voyons quelles autres méthodes il existe dans jQuery pour travailler avec le stockage de données en plus des données .

Méthode RemoveData

Cette méthode est conçue pour supprimer les données associées à un élément spécifique du stockage interne de jQuery. Cette méthode ne fonctionne pas avec les attributs de données, donc tous les attributs de données correspondant à la clé ne seront pas supprimés.

La syntaxe de la méthode RemoveData est :

// Option 1 - sans paramètres (supprime toutes les données associées à l'élément actuel du conteneur interne jQuery. Si plusieurs éléments sont renvoyés à la suite de la sélection, la méthode removeData effectuera son action (suppression des données de $.cache) pour chaque élément. $ ("selector").removeData(); // Option 2 - avec un paramètre de chaîne contenant le nom de la clé qui doit être supprimée de tous les éléments trouvés $("selector").removeData("key") ; // Option 3 - destinée à supprimer plusieurs paires de données associées à un élément du stockage interne de jQuery $("selector").removeData("key1 key2 ..."); seules les clés sont spécifiées à l'aide du tableau $("selector). ").removeData(["key1","key2",...]);

Supprimons plusieurs paires clé-valeur associées à l'élément avec id="book-js" du magasin jQuery :

// lecture de toutes les clés de l'élément #book-js (placement automatique des attributs de données dans le conteneur de données jQuery) $("#book-js").data(); // suppression de 2 clés associées à #books-js du conteneur de données jQuery $("#book-js").removeData(["price","name"]);

Fonction $.data()

Cette fonction effectue des actions similaires à la méthode data, mais contrairement à elle, elle fonctionne à un niveau inférieur. Par conséquent, dans la plupart des cas, la méthode des données est utilisée, car c'est un outil plus pratique pour travailler avec le stockage interne de jQuery.

Cette fonction est destinée uniquement à travailler avec le stockage jQuery et, contrairement à la méthode $("selector").data(), ne récupère pas les données des attributs de données HTML 5.

Syntaxe de la fonction jQuery.data() :

// Option 1 - enregistrement des informations dans le stockage jQuery $.data(element,key,value); // élément - élément DOM auquel la paire clé-valeur sera associée // clé - clé (chaîne) qui sera associée à la valeur // valeur - valeur (tout type de données sauf non défini) // Option 2 - obtention d'informations du magasin jQuery $.data(element,key); // élément - élément DOM associé aux données // clé - nom auquel la valeur souhaitée est associée // Option 3 - renvoie toutes les données associées à l'élément spécifié depuis le magasin de données $.data(element); // élément - élément DOM associé aux données

Un exemple d'utilisation de la fonction $.data() pour stocker des informations associées à un élément DOM spécifique dans le stockage jQuery :

// stocke les informations associées à l'élément id="book-html" $.data(document.getElementById("book-html"),"name","HTML en action"); // ajout d'une autre information associée au même élément $.data(document.getElementById("book-html"),"price","760"); "760" // récupération des données du magasin jQuery associées à l'élément id="book-html" en tant qu'objet var obj = $.data(document.getElementById("book-html")); // obtenir la valeur du nom de l'objet var name = obj.name; // obtenir la valeur du prix de l'objet var price = obj.price;

Fonction $.removeData()

Cette fonction, comme la méthode removeData, est utilisée pour supprimer des données du stockage interne de jQuery.

$.removeData() est une fonction de bas niveau, tout comme $.data() . Par conséquent, une option plus pratique consiste à utiliser la méthode data() au lieu de la fonction $.data().

Utilisation de la fonction jQuery.removeData() :

// Option 1 - suppression de toutes les informations du stockage associé à l'élément spécifié $.removeData(element); // élément - élément DOM auquel les données à supprimer sont associées // Option 2 - supprime une paire clé-valeur de l'ensemble de données associé à l'élément spécifié $.removeData(element,key); // élément - élément DOM associé aux données // clé - clé définissant un ensemble d'informations (valeur-clé) qui doivent être supprimées du conteneur de données jQuery

Démonstration d'utilisation de la fonction RemoveData :

// mettre les attributs de données dans le stockage jQuery $("#book-css").data(); // obtenir la clé de prix du magasin jQuery $("#book-css").data("price"); // 1170 // obtention de la clé de nom du magasin jQuery $("#book-css").data("name"); // "CSS pour les professionnels" // suppression de la clé de prix du stockage $.removeData(document.getElementById("book-css"),"price"); // lors de la réception d'une clé d'élément inexistante, on obtient la valeur undefined $.data(document.getElementById("book-css"),"price"); //indéfini

Fonction $.hasData()

Cette fonction détermine si un élément contient des données dans le stockage interne de jQuery.

En utilisant $.hasData() :

$.hasData(élément); // élément - élément DOM dont les données doivent être vérifiées dans $.cache

La fonction hasData renvoie true s'il existe des données dans le magasin associées à l'élément spécifié. Sinon, cette fonction renvoie false.

Le stockage interne $.cache est également utilisé par la bibliothèque jQuery elle-même. Un exemple consiste à l'utiliser pour stocker le code du gestionnaire d'événements jQuery.

Un exemple d'utilisation de la fonction hasData :

// vérification des données dans le stockage interne associé à l'élément #book-css $.hasData(document.getElementById("book-css")); //false // place la valeur dans la mémoire interne $("#book-css").data("name","CSS pour les professionnels"); // vérification des données dans le stockage interne associé à l'élément #book-css $.hasData(document.getElementById("book-css")); //true // supprime la valeur du stockage interne $.removeData(document.getElementById("book-css")); // vérification des données dans le stockage interne associé à l'élément #book-css $.hasData(document.getElementById("book-css")); //FAUX

Vous pouvez découvrir comment travailler dans jQuery avec les attributs de données apparus dans la spécification du langage HTML5 dans l'article "jQuery - Méthodes Attr et RemoveAttr". Ces méthodes (attr et removeAttr) sont utilisées non seulement pour gérer les attributs de données, mais également tout autre attribut des éléments HTML.