How to move an item in an array without updating all the others?

Question

I have an Array composed of Objects, such as :

const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 1 },
    { id: 2, title: 'Object 3', sort: 2 },
    { id: 3, title: 'Object 4', sort: 3 },
    { id: 4, title: 'Object 5', sort: 4 },
    { id: 5, title: 'Object 6', sort: 5 },
    { id: 6, title: 'Object 7', sort: 6 },
    { id: 7, title: 'Object 8', sort: 7 },
    { id: 8, title: 'Object 9', sort: 8 }
]

Using a dragging library (Sortable.js via VueDragguable), I receive the "onChange" event, which contains the following details :

element: The element moved, for instance, { id: 2, title: 'Object 3', sort: 2 }
newIndex: The new position for this element, such as 6
oldIndex: The old position, here, 3

When a change event is fired (with the move specifically, not add or remove), I'd like to update the sort property in the objects that are affected by the change, by modyfing the least number of objects (in order to reduce the number of writes in the database).

How could I do that?

Note: The "sort" parameter here is arbitrary. If a better way is possible, I can update the code accordingly.

acually i see an array. what data structure have you in your db? — Nina Scholz
– Nina Scholz, Commented Dec 13, 2022 at 9:42
You seem to ask multiple things. If this is only about the array data structure management, then please remove the extra layer of Sortable, Vue, DOM, onChange event, database, and simplify the question to just JavaScript. If however your question really is about keeping a list sorted in Vue, then please focus on that, providing the HTML and all that is necessary to reproduce the issue you have. — trincot
– trincot, Commented Dec 13, 2022 at 9:54
A different approach would be to also have a 'parent' object that contains a list of ordered ids, and just update that one object — Andrew Parks
– Andrew Parks, Commented Dec 13, 2022 at 9:54

RenaudC5 · Accepted Answer · 2022-12-13 10:39:01Z

3

In your case, you can simply move the item in your array to the right place using the splice method and then check if your items have the right place.

You can find all wrong items using the filter method with a comparison with those indexes.

const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 1 },
    { id: 2, title: 'Object 3', sort: 2 },
    { id: 3, title: 'Object 4', sort: 3 },
    { id: 4, title: 'Object 5', sort: 4 },
    { id: 5, title: 'Object 6', sort: 5 },
    { id: 6, title: 'Object 7', sort: 6 },
    { id: 7, title: 'Object 8', sort: 7 },
    { id: 8, title: 'Object 9', sort: 8 }
]

const event = {
  element: { id: 2, title: 'Object 3', sort: 2 },
  newIndex: 6,
  oldIndex: 2
}

// removing the item
items.splice(event.oldIndex, 1)

//replacing it
items.splice(event.newIndex - 1, 0, event.element)

const itemsToUpdateInDatabase = items.filter((item, index) => item.sort !== index)

console.log(itemsToUpdateInDatabase)

edited Dec 13, 2022 at 10:39

answered Dec 13, 2022 at 10:03

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

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

1 Comment

Homo Civicus Over a year ago

tbf I'd prefer to update "sort" properties without actually changing the order of elements in the array

Collectives™ on Stack Overflow

How to move an item in an array without updating all the others?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related