Pass json data to JavaScript without creating new object

[mrwad]

Thank you for example! It was very helpful. However I am having an issue and not aware about how to fix this.

I am querying json data from database then performing some filtering and further procedures. After that I want to display that data on map, so I am passing it through JSInterop to JavaScript. Everything seems to be working except that on each UpdateData() method execution I am getting new map on my webpage. So after executing method 4 times, I am having 4 maps on web page.

Index.razor:

<div>
  <select id="layer-select" style="visibility:hidden;">
    <option value="osm" selected>Open Street Map</option>
  </select>

  <div class="card-body p-0">
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</div>

Index.razor.cs:

[Inject] IJSRuntime JSRuntime { get; set; }
...

private async Task UpdateData()
{
  this.SelectedDate = this.SelectedDate.Value.AddDays(1);

  this.FilteredDataRecords = this.DataRecords
   .Where(w => w.TimeNow.Date == SelectedDate.Value.Date && (w.Latitude != 0 || w.Longitude != 0))
   .OrderBy(o => o.TimeNow)
   .ToList();

  string jsonData = JsonSerializer.Serialize(this.FilteredDataRecords);

  await JSRuntime.InvokeAsync<object>("olMap.showMap", jsonData);
}

map.js:

window.olMap = {
  showMap: function (jsonData) {

    var HereLayers = [
      {
        base: 'base',
        type: 'maptile',
        scheme: 'osm',
      },
    ];

    ...

    var vectorLayer = new ol.layer.Vector({
     source: loadMarineData(JSON.parse(jsonData)), //JSON.parse(jsonData)
      visible: true,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#d12710', width: 4 })
      })
    });

    var map = new ol.Map({
      overlays: [overlay],
      target: 'map',
      layers: layers,
      view: new ol.View({
        center: ol.proj.fromLonLat([25.2849, 60.0917]),
        zoom: 8
      })
    });

    map.addLayer(vectorLayer);
    map.addLayer(nauticLayer);

   ....

    var select = document.getElementById('layer-select');

    function onChange() {
      var scheme = select.value;
      for (var i = 0, ii = layers.length; i < ii; ++i) {
        layers[i].setVisible(HereLayers[i].scheme === scheme);
      }
    }

    select.addEventListener('change', onChange);

    onChange();
  }
};

[ayiemba]

Thank you for example! It was very helpful. However I am having an issue and not aware about how to fix this.

I am querying json data from database then performing some filtering and further procedures. After that I want to display that data on map, so I am passing it through JSInterop to JavaScript. Everything seems to be working except that on each UpdateData() method execution I am getting new map on my webpage. So after executing method 4 times, I am having 4 maps on web page.

Index.razor:

<div>
  <select id="layer-select" style="visibility:hidden;">
    <option value="osm" selected>Open Street Map</option>
  </select>

  <div class="card-body p-0">
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</div>

Index.razor.cs:

[Inject] IJSRuntime JSRuntime { get; set; }
...

private async Task UpdateData()
{
  this.SelectedDate = this.SelectedDate.Value.AddDays(1);

  this.FilteredDataRecords = this.DataRecords
   .Where(w => w.TimeNow.Date == SelectedDate.Value.Date && (w.Latitude != 0 || w.Longitude != 0))
   .OrderBy(o => o.TimeNow)
   .ToList();

  string jsonData = JsonSerializer.Serialize(this.FilteredDataRecords);

  await JSRuntime.InvokeAsync<object>("olMap.showMap", jsonData);
}

map.js:

window.olMap = {
  showMap: function (jsonData) {

    var HereLayers = [
      {
        base: 'base',
        type: 'maptile',
        scheme: 'osm',
      },
    ];

    ...

    var vectorLayer = new ol.layer.Vector({
     source: loadMarineData(JSON.parse(jsonData)), //JSON.parse(jsonData)
      visible: true,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#d12710', width: 4 })
      })
    });

    var map = new ol.Map({
      overlays: [overlay],
      target: 'map',
      layers: layers,
      view: new ol.View({
        center: ol.proj.fromLonLat([25.2849, 60.0917]),
        zoom: 8
      })
    });

    map.addLayer(vectorLayer);
    map.addLayer(nauticLayer);

   ....

    var select = document.getElementById('layer-select');

    function onChange() {
      var scheme = select.value;
      for (var i = 0, ii = layers.length; i < ii; ++i) {
        layers[i].setVisible(HereLayers[i].scheme === scheme);
      }
    }

    select.addEventListener('change', onChange);

    onChange();
  }
};

I would consider separating function for initializing map object ie. olMap.showMap() from the one updating the vector layer. You can add a function for updating the vector layer e.g olMap.UpdateVector(vectordata)