itérer à travers une carte en javascript

Question

J'ai une structure comme celle-ci :

var myMap = {
    partnr1: ['modelA', 'modelB', 'modelC'],
    partnr2: ['modelA', 'modelB', 'modelC']
};

Je vais itérer à travers chacun des éléments (partnr) avec leurs associés (modèles).

J'essaie une double itération $each pour y parvenir, mais rien ne se passe :

$.each(myMap, function (i, val) {
    $.each(i, function (innerKey, innerValue) {

        setTimeout(function () {
            $('#variant').fadeOut("slow", function () {
                $(this).text(innerKey + "-" + innerValue).fadeIn("slow");

            });

        }, i * 6000);

    });
});

L'effet de fondu enchaîné que j'essaie d'obtenir fonctionne bien lorsque j'utilise un tableau à valeur unique (Object), mais pas lorsque j'ai besoin d'avoir plus d'une valeur pour chaque clé, comme c'est le cas ici.

Avez-vous des idées sur la manière d'accomplir cette itération avec succès et y a-t-il d'autres moyens que l'utilisation d'une carte qui seraient meilleurs dans ce cas ?

Toute suggestion serait la bienvenue.

Answer 1

Une réponse à votre question de 2019 :

Cela dépend de la version d'ECMAScript que vous utilisez.

Avant ES6 :

Utilisez l'une des réponses ci-dessous, par exemple :

for (var m in myMap){
    for (var i=0;i<myMap[m].length;i++){
    ... do something with myMap[m][i] ...
    }
} 

Pour ES6 (ES 2015) :

Vous devez utiliser un Map qui possède l'objet entries() fonction :

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

Pour ES8 (ES 2017) :

Object.entries() a été introduite :

const object = {'a': 1, 'b': 2, 'c' : 3};
for (const [key, value] of Object.entries(object)) {
  console.log(key, value);
}

Answer 2

J'utiliserais du javascript standard :

for (var m in myMap){
    for (var i=0;i<myMap[m].length;i++){
    ... do something with myMap[m][i] ...
    }
} 

Notez les différentes façons de traiter les objets et les tableaux.

Answer 3

Approche fonctionnelle pour ES6

Si vous souhaitez adopter une approche plus fonctionnelle de l'itération sur le fichier Map vous pouvez faire quelque chose comme ceci

const myMap = new Map() 
myMap.forEach((value, key) => {
    console.log(value, key)
})

Answer 4

Le rappel de $.each() reçoit le nom et la valeur de la propriété, dans cet ordre. Vous essayez donc d'itérer sur les noms des propriétés dans l'appel interne à $.each() . Je pense que vous voulez :

$.each(myMap, function (i, val) {
  $.each(val, function(innerKey, innerValue) {
    // ...
  });
});

Dans la boucle interne, étant donné un objet comme votre carte, les valeurs sont des tableaux. C'est correct, mais notez que les valeurs de "innerKey" seront toutes des nombres.

éditer - Une fois cette question réglée, voici le problème suivant :

    setTimeout(function () {

      // ...

    }, i * 6000);

Lors du premier passage dans cette boucle, "i" sera la chaîne "partnr1". Ainsi, cette tentative de multiplication aboutira à un NaN . Vous pouvez conserver un compteur externe pour suivre le nombre de propriétés de la carte externe :

var pcount = 1;
$.each(myMap, function(i, val) {
  $.each(val, function(innerKey, innerValue) {
    setTimeout(function() {
      // ...
    }, pcount++ * 6000);
  });
});

Answer 5

Il semble que ce vieux fil de discussion sur JQuery ait été coopté par Carte ES6 utilisateurs.

Si c'est ce que vous recherchez, je vous suggère d'utiliser la fonction Array.from() qui convertit le Map à un Array . Cela vous permet d'enchaîner facilement des transformations telles que filter() , map() , etc.

const map = new Map([
  ['key one', 'value one'],
  ['key two', 'value two'],
]);

// Loop through key-value-pairs
Array.from(map.entries()).map(([key, val]) => console.log(key, val));

// Loop through map keys
Array.from(map.keys()).map(key => console.log(key));

// Loop through values
Array.from(map.values()).map(value => console.log(value));