Wie kann ich die Indexreihenfolge eines Arrays ändern?

Question

Ich habe eine Schaltfläche, die eine Funktion namens clickNext() hat. Wenn Sie auf diese Schaltfläche klicken, wird die Indexposition (scope.selected) für ein Array mit dem Namen 'arr1' erhöht.

<button type="button" class="right-btn col-xs-6" role="menuitem" ng-click="clickNext()">Next</button> 

.

function clickNext() 
     { 
      scope.selected = (scope.selected + 1) % length; 
     } 


arr1 = [ 
     {apple: 1 , tango}, 
     {banana: 3, kappa}, 
     {orange:5, alpha}, 
     {apple: 8 , beta}, 
     {grape: 10 , sigma} 
     ] 

Problem

I eine identische Anordnung haben ARR1 'ARR2' genannt. Was ich versuche zu tun, ist die clickNext() Inkrementierung der nächsten Indexposition basierend auf der arr2-Array anstelle der Arr1-Array.

Derzeit wird die clickNext-Funktion immer noch in der Reihenfolge des arr1-Arrays inkrementiert. Zum Beispiel, wenn ich auf die Schaltfläche klicken, wäre es auf orange beginnen: 5 dann Apfel bewegen 8 usw.

arr2 = [ 
     {orange:5, alpha}, 
     {apple: 8 , beta}, 
     {banana: 3, kappa}, 
     {grape: 10 , sigma}, 
     {apple: 1 , tango} 
     ] 

Was ich Mein obwohl Prozess versucht haben, dies zu tun ist das verwenden, findIndex() -Funktion und passen Sie das arr2-Element an das arr1-Element an. Das funktioniert nicht, aber vielleicht strukturiere ich es falsch?

clickNext(){ 
    var oldIndex = filteredToXs(scope.selected); 
    scope.selected = oldIndex + 1;} 

function filteredToXs(filteredIndex) { 
    var firstArr = scope.arr1[ filteredIndex ]; 
    var xsIndex = scope.arr2.findIndex(function(item) { 
    return item.trackingNumber === firstArr.trackingNumber; 
}); 
if(xsIndex >= 0) return xsIndex; 
if(xsIndex === -1) return 0; // Default value 
} 

Answer 1

Ich hoffe, ich habe Ihre Frage richtig verstanden. Bitte lesen Sie auch meine Kommentare in den Code-Abschnitten.

Ich musste Ihre Quelle ändern, damit ich eine Geige für Sie erstellen konnte.

HTML: änderte ich das Click-Ereignis und entfernt, um eine CSS-Klasse, die

<button type="button" role="menuitem" onclick="clickNext();">Next</button> 

Sampe Arrays nicht verfügbar ist: Sie wurden mit ungültigen Objekte: Ich änderte alpha, beta, Tango, .. auf eine Eigenschaft. Sie können sie auch als Werte definieren .. das sollte keine Rolle spielen:

var arr1 = [ 
    { apple: 1, tango: '' }, 
    { banana: 3, kappa: '' }, 
    { orange: 5, alpha: '' }, 
    { apple: 8, beta: '' }, 
    { grape: 10, sigma: '' }]; 

var arr2 = [ 
    { orange: 5, alpha: '' }, 
    { apple: 8, beta: '' }, 
    { banana: 3, kappa: '' }, 
    { grape: 10, sigma: '' }, 
    { apple: 1, tango: '' }]; 

Code:

var idx = 0; //save current index of array 2 

function clickNext() { 
    idx++; 

    //I'm comparing the array objects using a string compare- this only works because you said 'I have an identical array' 
    //this may cause issues if you're objects are cross-referenced 
    var find = function(array, obj) { //lookup value from arr2 in arr1 
     for (var i=0, l=array.length;i<l;i++) 
      if (JSON.stringify(array[i]) == JSON.stringify(obj)) //adjust this line to your needs 
       return array[i]; 
    } 
    var result = find(arr1, arr2[idx]) 
    if (!result) 
     throw new Error('not found- your arrays are not identical or you run out of index'); 
    console.log(result); 
} 

Geige: https://jsfiddle.net/k50y8pp5/