need to reorder list of objects based on index in angular js application

Question

In my angularjs application, I have the following list of objects.

$scope.itemsList = [
  {  
    "setupId": "T_2893",   
    "name" : "abc"

  },
  {   
    "setupId": "LBT826",   
    "name" : "xyz"

  },
  {   
    "setupId": "LBT1252",
   "name" : "pqr"

  },
  {   
    "setupId": "G1252",
   "name" : "dwr"

  }
]

Now when I call $scope.changeOreder(1, 3) function it should reorder the objects based on the prev and next index. so the list should be as follows.

  $scope.itemsList = [
      {  
        "setupId": "T_2893",   
        "name" : "abc"

      },      
      {   
        "setupId": "LBT1252",
       "name" : "pqr"

      },
      {   
        "setupId": "G1252",
       "name" : "dwr"

      },
       {   
        "setupId": "LBT826",   
        "name" : "xyz"

      }
    ]

Now if I call, $scope.changeOreder(2, 0), the new list should be,

$scope.itemsList = [
          {   
            "setupId": "G1252",
           "name" : "dwr"

          },
          {  
            "setupId": "T_2893",   
            "name" : "abc"

          },      
          {   
            "setupId": "LBT1252",
           "name" : "pqr"

          },          
           {   
            "setupId": "LBT826",   
            "name" : "xyz"

          }
        ]

In my $scope.changeOrder function, I have tried different ways, like taking the back up of the object at prevIndex , then deleting the obj at prevIndex to insert the backed up obj at newIndex, but because I have deleted the object the newIndex is no more valid in the current list!!!. Like this I tried different different ways but the final list is not getting ordered the way I am expecting. Can any one help me in fixing it.

Why not create a new array with the objects that is re-ordered and then just make the old array equal to the new one once you're done? — Mathew Berg
– Mathew Berg, Commented Jan 25, 2016 at 14:29

com2ghz · Accepted Answer · 2016-01-27 10:40:26Z

2

Moving an item to a specified index:

var items = [
          {   
            "setupId": "G1252",
           "name" : "dwr"

          },
          {  
            "setupId": "T_2893",   
            "name" : "abc"

          },      
          {   
            "setupId": "LBT1252",
           "name" : "pqr"

          },          
           {   
            "setupId": "LBT826",   
            "name" : "xyz"

          }
        ];


function moveItem(posA, posB) {
  /*
  * If an item is moved from a higher index to a lower index, then we need to
  * remove the current item first, then add it.
  * When moving a item from a low index to a higer index, then we need to add
  * the item first, then delete it.
  */
  var upToDown = posA > posB;


  var itemToMove = items[posA];
  //Make copy first
  var tmpList = items.slice(0); 

  if (!upToDown) {
      //Add item to specified index
    tmpList.splice(posB+1, 0, itemToMove); 

    //Remove the old item
    tmpList.splice(posA, 1); 
  } else { 
    //Remove the old item
    tmpList.splice(posA, 1); 
      //Add item to specified index
    tmpList.splice(posB, 0, itemToMove);

  }
  return tmpList;
} 

var result = moveItem(0, 3); 
console.log(result);

Plunk: https://plnkr.co/edit/23DGzcXBEY7qrqFWsQNA?p=preview

edited Jan 27, 2016 at 10:40

answered Jan 25, 2016 at 14:29

com2ghz

2,9263 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

com2ghz Over a year ago

If you want to modify an existing array by adding/deleting elements, then I recommend to make use of angular.copy() docs.angularjs.org/api/ng/function/angular.copy

lisa p. Over a year ago

This is a very simple solution to swap items. The problem in the posted question was that items were deleted, which is unnecessary if only their content changes.

Madasu K Over a year ago

com2ghz, there is a bug in your solution, it exchanges the two positions objects but that is not I want. I want one object to be dragged to either left or right and adjust remaining objects positions accordingly.

com2ghz Over a year ago

I have modified my answer, please check if this is what you want.

Collectives™ on Stack Overflow

need to reorder list of objects based on index in angular js application

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related