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