JavaScript Replacing Object in Array with ID Number-CodePudding

So I have a series of objects that are pulled from an API and inputted into an array, something like such:

array = [
 {id: 0, name: "First", relationship: "Friend"},
 {id: 1, name: "Second", relationship: "Friend"}
]

The user is allowed to add and remove objects to the list freely (they will appear within a Vue.JS DataTable), and said user is allowed a maximum of 4 objects within the array (lets say 4 "friends")

How should I go about implementing a function that searches the existing array (say, if its populated from the API), and inputs the new object with the corresponding ID that is missing (so if the user deletes the object with the id 2, and adds another, it will search said array with objects, find the missing id 2 slot in the array, and input the object in its place)?

Previously I have gone about it via implement array.find() with conditionals to see if the array contains or does not contain the certain id value, however, it searches through each entry and can end up inserting the same object multiple times. Another method I haven't attempted yet would be having a separate map that contains ids, and then when a user removes an object, having it correspond with the map, and vice versa when adding.

Any suggestions? Thanks

CodePudding user response：

Instead of an array, I'd keep an object in data. Have it keyed by id, like this:

let objects = {
  0: { id: 0, name: 'name0', relationship: 'relationship0' },
  1: { id: 1, name: 'name1', relationship: 'relationship1' },
}

Integer keys in modern JS will preserve insertion order, so you can think of this object as ordered. The API probably returns an array, so do this...

// in the method that fetches from the api
  let arrayFromApi = [...];
  this.objects = array.reduce((acc, obj) => {
    acc[obj.id] = obj;  // insertion order will be preserved
    return acc;
  }, {});

Your UI probably wants an array, so do this (refer to "array" in the markup):

computed: {
  array() {
    return Object.values(this.objects);
  },

To create a new object, insert it in order, minding the available keys. Note this is a linear search, but with small numbers of objects this will be plenty fast

methods: {
  // assumes maxId is const like 4 (or 40, but maybe not 400)
  createObject(name, relationship) {
    let object = { name, relationship };
    for (let i=0; i< maxId; i  ) {
      if (!this.objects[i]) {
        object.id = i;
        this.objects[i] = object;
        break;
      }
  }

CodePudding user response：

try this,

let array = [
      {id: 0, name: "First", relationship: "Friend"},
      {id: 4, name: "Second", relationship: "Friend"},
      {id: 2, name: "Second", relationship: "Friend"},
     ]

const addItem = (item) => {
  let prevId = 0

  // this is unnecessary if your array is already sorted.
  array.sort((a, b) => a.id - b.id) 
  array.forEach(ob => {
      if(ob.id  === prevId   1) prevId = ob.id
      else return;
    })
  item = {...item, id: prevId   1 }
  array.splice(prevId 1, 0, item)
}

addItem({name: "x", relationship: "y"})
addItem({name: "a", relationship: "b"})
addItem({name: "c", relationship: "d"})

console.log(array)