Javascript insert item into correct position in array of object

Question

I would like to insert an object into a sorted array of objects, but to know at which position to insert it :)

I have the following array of objects, the array is sorted by IP field:

let array = [{ 'ip': '192.168.0.1' }, { 'ip': '192.168.0.4'}, { 'ip': '192.168.0.10'}, { 'ip': '192.168.0.50'}, { 'ip': '192.168.0.60'}, ];

Now I would like to insert a new object to the array:

const newObject = { ip: '192.168.0.13' };

How can I add this new object to the correct position?

So that my array then looks like:

 let array = [{ 'ip': '192.168.0.1' }, { 'ip': '192.168.0.4'}, { 'ip': '192.168.0.10'}, { ip: '192.168.0.13' }, { 'ip': '192.168.0.50'}, { 'ip': '192.168.0.60'}, ];

How could I find the correct index, where to insert the item ?

Thomas · Accepted Answer · 2020-10-13 12:38:59Z

Another answer using findIndex and splice but with a different way to compare the IP-addresses.

By converting them into a single 32bit number. imo. simpler to deal with than an array of 4 bytes.

let array = [
  { 'ip': '192.168.0.1'}, 
  { 'ip': '192.168.0.4'}, 
  { 'ip': '192.168.0.10'}, 
  { 'ip': '192.168.0.50'},
  { 'ip': '192.168.0.60'},
]; 

const newObject = { ip: '192.168.0.13' };

const foldIp = (a,b) => a<<8 | b;
const ipValue = item => item.ip.split(".").reduce(foldIp, 0);

const newObjectValue = ipValue(newObject);
const index = array.findIndex(item => ipValue(item) > newObjectValue);

if (index === -1) {
  array.push(newObject);
} else {
  array.splice(index, 0, newObject);
}

console.log(array);

// or use it to sort();
console.log(
  "sort descending:", // as the array is currently sorted ascending
  array.sort((a,b) => ipValue(b) - ipValue(a))
);

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

Added both conversions

const IP = {
  // 3232235521 -> '192.168.0.1'
  toString(value) {
    return `${value >>> 24}.${value >> 16 & 0xFF}.${value >> 8 & 0xFF}.${value & 0xFF}`
  },
  // '192.168.0.1' -> 3232235521
  toUint(value) {
    const arr = value.split(".");
    return (arr[0] << 24 | arr[1] << 16 | arr[2] << 8 | arr[3]) >>> 0;
  }
}

AntonioSk · Accepted Answer · 2020-10-08 14:12:11Z

1

You can try this

array.push(newObject);

And after that sort it again.

answered Oct 8, 2020 at 14:12

AntonioSk

5361 gold badge3 silver badges21 bronze badges

Comments

Derek Wang · Accepted Answer · 2020-10-08 14:17:18Z

Using Array.findIndex, you can find the position to be inserted into the current array and using Array.splice, you can insert ip address to that position.

let array = [{ 'ip': '192.168.0.1' }, { 'ip': '192.168.0.4'}, { 'ip': '192.168.0.10'}, { 'ip': '192.168.0.50'}, { 'ip': '192.168.0.60'}, ]; 
const newObject = { ip: '192.168.0.13' };

const newIpArr = newObject.ip.split(".").map(item => parseInt(item));
const insertPos = array.findIndex(({ ip }) => {
  const ipArr = ip.split(".").map(item => parseInt(item));
  for (let index = 0; index < ipArr.length; index ++) {
    if (ipArr[index] > newIpArr[index]) {
      return true;
    }
  }
  return false;
});
array.splice(insertPos, 1, newObject);
console.log(array);

Amardeep Bhowmick · Accepted Answer · 2020-10-08 14:42:31Z

1

You can use splice and set the delete count to 0 to add at a specific position but this would mutate the original array.

The same can be done with slice and spread operator but it would not mutate the original array.

To find the exact position where you need to insert, you can pass a predicate to the findIndex function. The findIndex function would the right index where you need to insert the new object.

The predicate here would be an IP comparison function. In my example I made a crude IP comparing function which does the job:

let array = [{ 'ip': '192.168.0.1' }, { 'ip': '192.168.0.4'}, { 'ip': '192.168.0.10'}, { 'ip': '192.168.0.50'}, { 'ip': '192.168.0.60'}, ]; 
const newObject = { ip: '192.168.0.13' };

const compareIp = (ip1, ip2) => {
  const arr1 = ip1.split(".").map(n => +n);
  const arr2 = ip2.split(".").map(n => +n);
  return arr1.every((e, i) => e <= arr2[i]);
}

//Not mutating original array
const insertAtPosition = (arr, obj) => {
  const idx = arr.findIndex(o =>  compareIp(obj.ip, o.ip));
  return [...array.slice(0, idx), obj,...array.slice(idx)]
}

//Mutating original array
const insertAtPositionMutated = (arr, obj) => {
   const idx = arr.findIndex(o =>  compareIp(obj.ip, o.ip));
  arr.splice(idx, 0, obj);
  return arr
}

console.log(insertAtPosition(array, newObject));

console.log(insertAtPositionMutated(array, newObject));

edited Oct 8, 2020 at 14:42

answered Oct 8, 2020 at 14:12

Amardeep Bhowmick

17k3 gold badges33 silver badges46 bronze badges

1 Comment

Loki Over a year ago

I know about that, but what if I have a bigger list, I would want to find at which position to insert item ?

Collectives™ on Stack Overflow

Javascript insert item into correct position in array of object

4 Answers 4

Added both conversions

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Added both conversions

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related