Discussion :

[patrick754]

Bonjour à tous
Je viens demander votre aide.
J'ai un ensemble d'éléments ayant en commun la classe "target", j'essai de récupérer tous les attributs ainsi que les valeurs correspondantes dans un tableau.
J'utilise le code ci dessous, j'ai bien le résultat souhaité pour chaque élément lorsque je fais console log dans la boucle, mais le résultat finale me donne un tableau vide.

Ci dessous le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
let
				obj = {},
 
				$.map($('.target'), function(elem){
 
					for (var att, i = 0, atts = elem.attributes, n = atts.length; i < n; i++){
						att = atts[i];
						obj[att.nodeName] = att.nodeValue;
					}
 
				});

Merci d'avance pour votre aide.

Cordialement

[mathieu]

montrez nous le code entier avec le code de débugage et le résultat qui s'affiche.

[patrick754]

Bonjour Mathieu, ci dessous les codes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function showattr() {
	let
		obj = {};
 		$.map($('.target'), function(elem){
			for (var att, i = 0, atts = elem.attributes, n = atts.length; i < n; i++){
				att = atts[i];
				obj[att.nodeName] = att.nodeValue;
			}
		});
	console.log(obj);
};

Ci-dessous un exemple d'élément sur lequel j'aimerai récupérer par exemple les attribut : data-divid, data-type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h6 class="targetix" id="btn_03683e4d31e40faebf23_3" data-type="typeo" data-divid="03683e4d31e40faebf23">test</h6>

Ci dessous le résultat de la console :


Merci pour votre aide

Cordialement

[mathieu]

en mettant $('.targetix') dans votre code, j'obtiens bien la liste des attributs dans le tableau "obj".

https://codesandbox.io/s/elated-haibt-c68bn

[patrick754]

[Merci pour ton aide. J'ai regardé, comme ça marche mais j'ai plusieurs éléments et lorsque je duplique l'élément (pour en avoir 2 ou plus) uniquement les attributs du dernier élément sont récupéré. Alors que je m'attend a avoir un tableau avec les attribut de chaque élément.

Merci de ton aide

[mathieu]

c'est parce que vous utilisez un tableau avec le nom des attributs comme clé.
pour le 1er élément, la valeur de l'attribut est enregistré sous la clé "data-type" par exemple. mais ensuite quand la boucle parcours le 2e élément, la nouvelle valeur écrase la valeur du 1er élément.

avant de faire le code, il faut d'abord que vous choisissez quelle structure de données vous voulez pour stocker le résultat de la lecteur des attributs.

[patrick754]

Je comprend. Merci pour cette precision. Cependant pourriez vous m'aider a corriger mon code afin de pouvoir recuperer les attributs de tous les elements s'il vous plait?
Merci pour l'aide

Cordialement

[jreaux62]

Bonjour,

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function showattr() {
  var obj = {};
  $.map( $('.targetix'), function(elem, x=0){
    obj[x] = {};
    let atts = elem.attributes, 
        n = atts.length;
    for (let i=0; i<n; i++)
    {
      obj[x][atts[i].nodeName] = atts[i].nodeValue;
    }
    x++;
  });
  return obj;
};

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var target_attr_obj = showattr();
console.log( target_attr_obj );  // test

[patrick754]

Bonjour
C'est parfait! Ca marche comme je souhaite.

Grand merci à vous pour votre aide

Cordialement

[NoSmoking]

Bonjour,
je me permet de faire quelque remarques sur le code posté par jreaux62.

• Concernant : var obj = {}; :
L'utilisation d'un objet possédant des clés numériques, outre le fait que celles-ci soient prises en compte comme des strings, fait que l'on se prive de toutes les méthodes liées aux array et notamment forEach souvent de bon aloi.
Dans ce cas on obtient, par exemple quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
type_object : {
  "0": {
    "id": "id_1",
    "data-type": "texte",
    "data-divid": "0001"
  },
  "1": {
    "id": "id_2",
    "data-type": "texte",
    "data-divid": "0002"
  },
  "2": {
    "id": "id_3",
    "data-type": "texte",
    "data-divid": "0003"
  },
  "3": {
    "id": "id_4",
    "data-type": "texte",
    "data-divid": "0004"
  }
}

... plutôt que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
type_array : [
  {
    "id": "id_1",
    "data-type": "texte",
    "data-divid": "0001"
  },
  {
    "id": "id_2",
    "data-type": "texte",
    "data-divid": "0002"
  },
  {
    "id": "id_3",
    "data-type": "texte",
    "data-divid": "0003"
  },
  {
    "id": "id_4",
    "data-type": "texte",
    "data-divid": "0004"
  }
]

peut être plus lisible et facilement exploitable.

• Concernant : obj[x][atts[i].nodeName] = atts[i].nodeValue; :

nodeName et nodeValue sont des propriétés dépréciées et a remplacer par name et value.

Voir pour infos :

• https://dom.spec.whatwg.org/#interface-attr
• https://developer.mozilla.org/en-US/...es_and_methods

• Concernant : x++; :
L'incrémentation, tout comme l’initialisation, ne sert à rien, x est incrémenté par la fonction mise en callback.

Voir pour infos :

• https://api.jquery.com/jQuery.map/

• Concernant : la boucle

De nos jours il existe une instruction plus consiste comme for...of, le code s'en trouve allégé et plus lisible, bien que cela soit un point de vue très personnel.

• Au final la fonction pourrait ressembler, par exemple, à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function showattr(selecteur) {
  const arr = [];
  $.map($(selecteur), function(elem) {
    const obj = {};
    for (let attr of elem.attributes) {
      obj[attr.name] = attr.value;
    }
    arr.push(obj);
  });
  return arr;
};
const result = showattr(".targetix");
console.log("result :", JSON.stringify(result, null, 2));

[jreaux62]

@NoSmoking

Je plussois à toutes tes remarques