Dynamically fetching only related values instead of all attribute values in dropdown from GeoJSON in OpenLayers

Question

I have a vector layer in GeoServer which basically has 14 line/fields/polyline attributes

I want the list of only those stations in the 2nd dropdown of end station which are actually related

Like 5 out of 14 lines in the shapefile (highlighted with yellow) are originating/starting from New Delhi.

FID     Start_station         End_Station
306     New Delhi             Ambala
307     New Delhi             Rohtak
1230    New Delhi             Saharanpur
1231    New Delhi             Hapur
1232    New Delhi             Aligarh

I am fetching the attributes from column named FROM_ in the shapefile in the dropdown as

var select_from = $('#from_station');
var from_station_Array = new Array();
Railway_Layer.getSource().on('addfeature', function (e) {
  const name = e.feature.get('FROM_');
  var value_station_from = String(name);
  if (jQuery.inArray(value_station_from, from_station_Array) == -1) {
    select_from.append(
      "<option class='ddindent'>" + value_station_from + '</option>'
    );
    from_station_Array.push(value_station_from);
  }
  // console.log('FROM_ station names are ', name);
});

& I am fetching the attributes from column named TO in the shapefile in the dropdown as

var select_to = $('#to_station');
var to_station_Array = new Array();
Railway_Layer.getSource().on('addfeature', function (e) {
  const name = e.feature.get('TO');
  var value_station_to = String(name);
  if (jQuery.inArray(value_station_to, to_station_Array) == -1) {
    select_to.append(
      "<option class='ddindent'>" + value_station_to + '</option>'
    );
    to_station_Array.push(value_station_to);
  }

  // console.log('TO_ station names are ', name);
});

I want if I Select New Delhi from 1st dropdown, then only these 5 stations viz: Ambala, Rohtak, Saharanpur, Hapur, Aligarh whose originating point is New Delhi should appear in the 2nd dropdown, instead of whole list.

Currently, the whole list appears here in the 2nd dropdown.

In case if I select New Delhi from 1st dropdown, and any value, to whom New Delhi is not related i.e. not an originating point then the query does not run.

e.g: if I select New Delhi from 1st dropdown & Kurukshetra from 2nd, it will not work, as New Delhi in the shapefile does not have Kurukshetraas its related attribute

Manually assigning them values and then Mapping with JQuery is not feasible as there are lot of stations, which keep on changing/updating.

so basically, How to map values from a column based on another column in the shapefile?

Refer to this URL for working Fiddle

Answer 1

There are a few things you have to do to make it work:

• Set variable featureNames with all the travel relations as global, so it will be available for filtering To Station when From Station is selected.
• Initially build only From Station options, To Station field should be disabled.
• When From Station is selected, clear any previous To Station drop down options and then loop through featureNames and build drop down options for To Station from those end stations which have origin in selected From Station.

That's how relevant part of the code could then look:

function addStationOption(value_station, station_Array, select) {
  if (jQuery.inArray(value_station, station_Array) == -1) {
    select.append(
      "<option class='ddindent'>" + value_station + '</option>'
    );
    station_Array.push(value_station);
  }
}

var select_from = $('#from_station');
var from_station_Array = new Array();
var select_to = $('#to_station');
var to_station_Array = new Array();
var featureNames = [];

Railway_Layer.getSource().on('addfeature', function (e) {
  var feature, name, value_station, FID, start_station, end_station;
  
  feature = e.feature;
  name = feature.get('FROM_');
  value_station = String(name);
  addStationOption(value_station, from_station_Array, select_from);

  FID = feature.get('FID_IMD');
  start_station = feature.get('FROM_');
  end_station = feature.get('TO');
  featureNames.push({
    FID: FID,
    start_station: start_station,
    end_station: end_station
  });
});

Railway_Layer.getSource().on('change', function (ev) {
  if (Railway_Layer.getSource().getState() !== 'ready') return;

  $('#myTable').DataTable({
    fixedHeader: {
      header: true,
      footer: true
    },
    data: featureNames,
    columns: [
      { data: 'FID' },
      { data: 'start_station' },
      { data: 'end_station' }
    ],
    scrollY: 300,
    paging: false
  });
});

select_to.prop('disabled', true);
select_from.change(function() {
  var selection = this.value;
  to_station_Array = [];
  select_to.empty();
  select_to.append('<option value="">To Station</option>');
  select_to.prop('disabled', (selection.length == 0));
  
  if (selection.length == 0) return;
  
  featureNames.forEach(function(feature) {
    if (feature.start_station == selection) {
      addStationOption(feature.end_station, to_station_Array, select_to);
    }
  });
});

select_to.change(function() {
  var selection = this.value;
  if (selection.length == 0)
    console.log('No end station selection');
  else {
    console.log('End station selected: ', selection);
  }
});

And one remark: this is not really a GIS related question, but pure HTML/JS one, so please in the future post this kind of questions on StackOverflow site.