CODEWITHSUNDEEP
javascriptarrayssortingindexing
Kode_12
Kode_12

Reputation: 4798

How can I change the index order of an array?

I have a button that has a function called clickNext(). Whenever that button is clicked, it increments the index position (scope.selected) on an array called 'arr1'.

<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 have an identical array to arr1 called 'arr2'. What I'm trying to do is have the clickNext() increment to the next index position based on the arr2 array instead of the arr1 array.

Right now, the clickNext function still increments in the order of the arr1 array. For example, if I were to click the button, it would start on orange:5 then move to apple 8, etc. 

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

What I have tried My though process to accomplish this is to use the findIndex() function and match the arr2 item to the arr1 item. That doesn't work, but maybe I'm structuring it wrong?

  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
 }

Upvotes: 1

Views: 118

Answers (1)

Wolfgang
Wolfgang

Reputation: 896

I hope I understood your question correctly. Please read my comments in the code sections as well.

I had to modify your source so I was able to create a fiddle for you.

HTML: I changed the click event and removed a css class that's not available

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

Sampe Arrays: They were containing invalid objects: I changed alpha, beta, tango, .. to a property. You can also define them as values.. this shouldn't matter:

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

fiddle: https://jsfiddle.net/k50y8pp5/

Upvotes: 1

Related Questions