Filter and display dropdown based on data from API call

Question

I have two functions:

• one fetch the API and get back the data (async function)
• the other use this data to filter and display information (dropdown function)

The problem is the drop down function is very slow when filtering. How can I please optimise this function ? This line takes lots of time before finishing.

let currentLayer = edges_data_api.find(element => element.edge_id===layer.feature.properties.edge_id) outside the geojsonLayer.eachLayer(function(layer)

const request = async () => {
const links = await fetch(`http://127.0.0.1:8000/api/network/${network_id}/edges/`);
  const linksdata = await links.json();
  return linksdata
}
request();

async function linkDropDown() {
  // Remove any previous legend
  d3.select('#linkLegendSvg').remove();
  const edges_data_api = await request()

  /* Lanes contants variables*/
  var lanes_array = edges_data_api.map(element => element.lanes);
  var lanes_max = d3.max(lanes_array);
  var lanes_min = d3.min(lanes_array);
  var lanes_colorscale = d3.scaleLinear().domain(d3.extent(lanes_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb('#FFF500'), d3.rgb("#FF0000")]);

  /* Length constants variables*/
  var length_array = edges_data_api.map(element => element.length);
  var length_colorscale = d3.scaleLinear()
    .domain(d3.extent(length_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#FFF500"), d3.rgb("#00ff00")]);
  var length_max = d3.max(length_array);
  var length_min = d3.min(length_array);

  /* Speed constants variables*/
  var speed_array = edges_data_api.map(element => element.speed);
  var speed_colorscale = d3.scaleLinear().domain(d3.extent(speed_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#FFF500"), d3.rgb("#000066")]);
  var speed_max = d3.max(speed_array);
  var speed_min = d3.min(speed_array);

  var linkSelector = document.getElementById('linkSelector')
  if (linkSelector.value == "lanes") {
    drawLinkLegend(lanes_colorscale, lanes_min, lanes_max);
    geojsonLayer.eachLayer(function(layer) {
      let currentLayer = edges_data_api.find(
        element => element.edge_id === layer.feature.properties.edge_id)
      let lanes_color = lanes_colorscale(currentLayer.lanes)
      layer.setStyle({
        fillColor: lanes_color,
        color: lanes_color,
      });

      layer.on('mouseover', function(e) {
        layer.setStyle({
          color: 'cyan',
          fillColor: 'cyan'
        })
      })
      layer.on('mouseout', function(e) {
        layer.setStyle({
          color: lanes_color,
          fillColor: lanes_color
        })
      })
    })
  } else if (linkSelector.value == "length") {
    drawLinkLegend(length_colorscale, length_min, length_max);
    geojsonLayer.eachLayer(function(layer) {
      let currentLayer = edges_data_api.find(
        element => element.edge_id === layer.feature.properties.edge_id)
      var length_color = length_colorscale(currentLayer.length)
      layer.setStyle({
        fillColor: length_color,
        color: length_color
      });
      layer.on('mouseover', function(e) {
        layer.setStyle({
          color: 'cyan',
          fillColor: 'cyan'
        })
      });
      layer.on('mouseout', function(e) {
        layer.setStyle({
          color: length_color,
          fillColor: length_color
        })
      });
    });
  }
}