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

N'utilisez pas d'itérateurs pour ce faire. Maintenez votre propre boucle en incrémentant un compteur dans le rappel, et en appelant récursivement l'opération sur l'élément suivant.

$.each(myMap, function(_, arr) {
    processArray(arr, 0);
});

function processArray(arr, i) {
    if (i >= arr.length) return;

    setTimeout(function () {
        $('#variant').fadeOut("slow", function () {
            $(this).text(i + "-" + arr[i]).fadeIn("slow");

            // Handle next iteration
            processArray(arr, ++i);
        });
    }, 6000);
}

---

Mais il y a une erreur de logique dans votre code. Vous attribuez au même conteneur plusieurs valeurs différentes (à peu près) en même temps. Vous voulez peut-être que chacun mette à jour son propre conteneur.

Answer 2

Nous pouvons utiliser la méthode forEach disponible sur les cartes à partir de la version ES6.

var myMap =new Map([
    ["partnr1", ['modelA', 'modelB', 'modelC']],
    ["partnr2", ['modelA', 'modelB', 'modelC']]
]);

myMap.forEach(function(values,key){

  console.log(key);

  /*****Do something with the models***********/

  for(const [index,value] of values.entries()){
      console.log(`   ${key}[${index}] : ${value}`);
  }
  });

Answer 3

Ceci est facilement réalisable à l'aide d'un code javascript Map objet. Il suffit d'itérer sur l'objet Map en utilisant le fait que la carte sur laquelle vous itérez est incluse en tant qu'argument dans chaque appel d'itération. Notez que le map dans l'argumentaire de la forEach fonction. Il s'agit de la même Map sur lequel vous itérez.

// Define the map
const myMap = new Map([
    ["key1", "value 1"],
    ["key2": "value 2"],
    ["key3": "value 3"]
])

// Iterate over the map, updating each value
myMap.forEach((value,key,map) => {
   map.set(key, value + "A")
})

/*
Result: myMap now looks like this:
[ 
    ["key1", "value 1A"],
    ["key2": "value 2A"],
    ["key3": "value 3A"]
]
/*