Replacing old values in array with new ones on button click

Question

So I am creating a web app that uses the BLE web api. I made it so that when you press the scan button it scans for bluetooth devices and filters out all the ones that are not ESP's. Then it calculates the distance and pushes it into an array. As it is now if you press scan multiple times the array jsut gets longer and longer because of the "push". However i want it to replace old values with the new values when you press scan again. so that the array length stay 3.

import * as trilateration from './trilateration.js';
import context from './context.js';

const beaconMapping = {
  'ESP32_1': 0,
  'ESP32_2': 1,
  'ESP32_3': 2,
}

const DISTANCE_SCALAR = 1;

console.log("Init");
const devices = [];
const ids = [];
const beaconuuid = [];
const distances = [];

const SCAN_TIME = 10000;

//add beacons to trilatertion;
trilateration.addBeacon(0, trilateration.vector(10.1, 7.0));
trilateration.addBeacon(1, trilateration.vector(0, 0));
trilateration.addBeacon(2, trilateration.vector(10.1, 0));

document.getElementById("scan").onclick = scan;

async function scan() {
  console.log("Scanning...");

  let options = {
    acceptAllAdvertisements: true,
    acceptAllDevices: true,
  };

  try {
    log("Requesting Bluetooth Scan with options: " + JSON.stringify(options));
    const scan = await navigator.bluetooth.requestLEScan(options);

    log("Scan started with:");
    log(" acceptAllAdvertisements: " + scan.acceptAllAdvertisements);
    log(" active: " + scan.active);
    log(" keepRepeatedDevices: " + scan.keepRepeatedDevices);
    log(" filters: " + JSON.stringify(scan.filters));

    navigator.bluetooth.addEventListener("advertisementreceived", (event) => {
      let name = event.device.name;
      if (name && name.startsWith("ESP32") && !ids.includes(event.device.id)) {
        console.log("Found");
        //console.log(event);

        //add to device list if name starts with ESP32
        console.log("adding");
        const obj = {
          device: event.device,
          uuids: event.uuids,
          rssi: event.rssi,
          tx: event.txPower,
          distance: calculateDistance(event.rssi, event.txPower) * DISTANCE_SCALAR,
        };
        console.log(obj);
        console.log(obj.tx, obj.rssi, obj.distance, name);
        devices.push(obj);
        ids.push(event.device.id);

        const beaconIndex = beaconMapping[event.device.name];
        if (beaconIndex !== undefined) {
          distances.push(obj.distance);
          trilateration.setDistance(beaconIndex, obj.distance);
        } else {
          console.error("Name not found in mapping");
        }

        if (distances.length > 2) {
          var pos = trilateration.calculatePosition();
          console.log(pos);
          console.log("Distqnces qrr length", distances.length)
          console.log("X: " + pos.x + "; Y: " + pos.y);
          context.fillRect(pos.x * 100, pos.y * 100, 20, 20);
        }

        showBeaconInfo(obj);
      }
      /*             log('Advertisement received.');
                        log('  Device Name: ' + event.device.name);
                        log('  Device ID: ' + event.device.id);
                        log('  RSSI: ' + event.rssi);
                        log('  TX Power: ' + event.txPower);
                        log('  UUIDs: ' + event.uuids); */
    });

    setTimeout(stopScan, SCAN_TIME);

    function stopScan() {
      console.log("List of all devices detected:");
      console.log(devices);
      console.log(ids)
      console.log(beaconuuid);
      console.log(distances)
      log("Stopping scan...");
      scan.stop();
      log("Stopped.  scan.active = " + scan.active);
    }
  } catch (error) {
    log("Argh! " + error);
  }
}

Answer 1

You can either go with the object approach and use the uuid as the keys which will replace whenever you add the same uuid to the object again.

If you want to go with the array approach you can check whether an object with that uuid already exists and then overwrite that index.

Here's a general idea.

// This will return the index if the element exists or -1 if it doesn't exist
const index = array.findIndex(element => element.uuid === obj.uuid)

if (index === -1) {
  array.push(obj)
} else {
  array[index] = obj
}

And this will keep the array constrained to only unique elements.