How to reorder an array of objects using other array that has index and returns the new ordered array

Question

What I want exactly is a function that we can pass two arrays, one the original array of objects with specific order, and the other is an array of objects that has the new target index so the function will return the original array to new order based on the indexes

For example : this is how the original array will look like

const columns=[
      {

        field: "name",
        type: "action",
        width: settings.defaultColumnWidth,
      },
      {
        field: "country",
        type: "action",
        width: settings.defaultColumnWidth,
      
      },
      {
        field: "phone",
        type: "action",
        width: settings.defaultColumnWidth,            
      },
      {
        field: "email",
        type: "action",
        width: settings.defaultColumnWidth,
        
      },
    ]

And the other array that have objects with fields name and the target index to be ordered

const newOrder = [
  {
    field: "country"
    oldIndex: 1
    targetIndex: 2
  },
]

So the new array that should be returned from the function will be like this

  const columns=[
  {

    field: "name",
    type: "action",
    width: settings.defaultColumnWidth,
  },
  {
    field: "phone",
    type: "action",
    width: settings.defaultColumnWidth,            
  },
  {
    field: "country",
    type: "action",
    width: settings.defaultColumnWidth,

  },
  {
    field: "email",
    type: "action",
    width: settings.defaultColumnWidth,

  },
]

I hope my question is clear, thanks in advance for your help

Nothing react related in your question. Where is your attempt to solve it? — mplungjan
– mplungjan, Commented Aug 27, 2022 at 18:59
@mplungjan I am happy you asked, the thing is I am using DataGridPro table of mui and there is this prop func onColumnOrderChange when I reorder the columns its return an object with the new order of that specific column, now I want to save the new order because when refresh the order of the columns return as previous, I came up with this solution — Rooh Al-mahaba
– Rooh Al-mahaba, Commented Aug 28, 2022 at 6:45
@mplungjan There is already another question about this, but its not answered — Rooh Al-mahaba
– Rooh Al-mahaba, Commented Aug 28, 2022 at 6:48

IT goldman · Accepted Answer · 2022-08-27 18:43:09Z

Assuming there won't be too much contradiction, I think splice and such should work.

var settings = {
  defaultColumnWidth: 12
}

const columns = [{
    field: "name",
    type: "action",
    width: settings.defaultColumnWidth
  },
  {
    field: "country",
    type: "action",
    width: settings.defaultColumnWidth
  },
  {
    field: "phone",
    type: "action",
    width: settings.defaultColumnWidth
  },
  {
    field: "email",
    type: "action",
    width: settings.defaultColumnWidth
  }
]

const newOrder = [{
    field: "country",
    oldIndex: 1,
    targetIndex: 2
  }
];



newOrder.forEach(function(item) {
  var field = item.field
  var targetIndex = item.targetIndex
  for (var i = 0; i < columns.length; i++) {
    var column = columns[i];
    if (column.field == field) {
      var elem = columns.splice(i, 1)[0];
      columns.splice(targetIndex, 0, elem);
      break;
    }
  }
})

console.log(columns);

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

mplungjan · Accepted Answer · 2022-08-27 19:10:40Z

1

Here is a simple version

Array.prototype.move = function(from, to) { this.splice(to, 0, this.splice(from, 1)[0]);};
const columns = [{ field: "name", type: "action", width: "settings.defaultColumnWidth", }, { field: "country", type: "action", width: "settings.defaultColumnWidth", }, { field: "phone", type: "action", width: "settings.defaultColumnWidth", }, { field: "email", type: "action", width: "settings.defaultColumnWidth", }, ];
const newOrder = [{ field: "country", oldIndex: 1, targetIndex: 2 } ];

newOrder.forEach(({ field, oldIndex, targetIndex }) => columns[oldIndex].field === field &&  columns.move(oldIndex,targetIndex));

console.log(columns)

answered Aug 27, 2022 at 19:10

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Shoaib Ali · Accepted Answer · 2022-08-27 19:21:51Z

You can achieve this with swapping technique.

var settings = {
  defaultColumnWidth: 6
}

const columns=[
    {

        field: "name",
        type: "action",
        width: settings.defaultColumnWidth,
    },
    {
        field: "country",
        type: "action",
        width: settings.defaultColumnWidth,
      
    },
    {
        field: "phone",
        type: "action",
        width: settings.defaultColumnWidth,            
    },
    {
        field: "email",
        type: "action",
        width: settings.defaultColumnWidth,
    },
];
    
const newOrder = [
    {
        field: "country",
        oldIndex: 1,
        targetIndex: 2
    },
];

newOrder.forEach(function(order) {
  // swapping
  let temp = columns[ order['targetIndex'] ];
  columns[ order['targetIndex'] ] = columns[ order['oldIndex'] ];
  columns[ order['oldIndex'] ] = temp;
});

console.log( columns );

Collectives™ on Stack Overflow

How to reorder an array of objects using other array that has index and returns the new ordered array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related