iterate attraverso una mappa in javascript

Question

ho una struttura come questa:

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

vado a scorrere ciascuno degli elementi (partnr) con i loro associatives (modelli).

Sto cercando un doppio $ ciascuna iterazione al fine di raggiungere questo obiettivo, ma non succede nulla:

$.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'effetto di dissolvenza dentro e fuori che sto cercando di realizzare è lavorare bene quando si utilizza un unico valore array (Object), ma non quando ho bisogno di avere più di un valore per ogni chiave come qui.

Qualche idea su come eseguire questa iterazione con successo e ci sono altri modi oltre all'utilizzo di una mappa che sarebbe meglio in questo caso?

Eventuali suggerimenti sarebbero di interesse.

Answer 1

La richiamata a $.each() passa il nome della proprietà e il valore, in questo ordine. Stai quindi tentando di ripetere i nomi delle proprietà nella chiamata interna a $.each(). Penso che si desidera:

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

Nel ciclo interno, dato un oggetto come la mappa, i valori sono gli array. Va bene, ma nota che i valori "innerKey" saranno tutti numeri.

modificare — Ora, una volta che è raddrizzato, ecco il problema successivo:

setTimeout(function() { 

     // ... 

    }, i * 6000); 

La prima volta attraverso quel ciclo, "i" sarà la "partnr1" stringa. Pertanto, il tentativo di moltiplicazione risulterà in un NaN. È possibile mantenere un contatore esterno per tenere traccia del conteggio di proprietà della mappa esterna:

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

Answer 2

userei javascript di serie:

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

Nota i diversi modi di trattare gli oggetti e gli array.

Answer 3

Non utilizzare gli iteratori per eseguire questa operazione. Mantenere il proprio loop incrementando un contatore nel callback e chiamando ricorsivamente l'operazione sull'elemento successivo.

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

---

Anche se c'è un errore logico nel codice. Stai impostando lo stesso contenitore su più di un valore diverso a (approssimativamente) nello stesso tempo. Forse intendi per ognuno di aggiornare il proprio contenitore.