iterację mapą w javascript

Question

Mam strukturę tak:

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

będę iterację każdego z elementów (partnr) z ich associatives (modelach).

Staram podwójnym $ każdej iteracji, aby osiągnąć ten cel, ale nic się nie dzieje:

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

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

      }); 

     }, i * 6000); 

    }); 
}); 

efekt za pomocą blaknięcie i obecnie, że staram się osiągnąć działa poprawnie przy użyciu pojedynczej wartości array (Object), ale nie wtedy, gdy potrzebuję więcej niż jedną wartość dla każdego klucza, jak tutaj.

Jakieś pomysły na to, jak przeprowadzić tę iterację z powodzeniem i czy istnieją inne sposoby niż wykorzystanie mapy, która byłaby lepsza w tym przypadku?

Wszelkie sugestie mogą być interesujące.

Answer 1

Połączenie zwrotne z numerem $.each() przekazuje nazwę właściwości i wartość w tej kolejności. Dlatego próbujesz powtórzyć nazwy właściwości w wewnętrznym wywołaniu $.each(). Myślę, że chcesz:

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

W pętli wewnętrznej, podanej jako obiekt, np. Mapa, wartości są tablicami. To jest w porządku, ale pamiętaj, że wartości "innerKey" będą liczbami.

edit — Teraz kiedyś, że jest prostowane, oto kolejny problem:

setTimeout(function() { 

     // ... 

    }, i * 6000); 

Po raz pierwszy dzięki tej pętli "i" będzie ciąg "partnr1". Tak więc, ta próba mnożenia będzie skutkować NaN. Można zachować zewnętrzny licznik śledzić liczenia własności zewnętrznej mapie:

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

Answer 2

będę używać standardowych javascript:

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

Uwaga różne sposoby leczenia obiektów i tablic.

Answer 3

Do tego celu nie należy używać iteratorów. Zachowaj własną pętlę, zwiększając licznik w wywołaniu zwrotnym i rekurencyjnie wywołując operację na następnym elemencie.

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

---

Choć nie jest to błąd logiczny w kodzie. Ustawiasz ten sam kontener na więcej niż jedną inną wartość w (mniej więcej) tym samym czasie. Być może masz na myśli, aby każdy z nich zaktualizował swój własny kontener.