I have a backend written in spring boot that consumes two external APIs, processes them writes them to a DTO, and then through a controller injects them into the frontend. My site marks the location of planes on a map. The location changes every 1s, so I would like the planes on my site to refresh every 1s as well. The site does not provide Web Socket, but it is possible to call API every 2s. I set Scheduler but even when data was fetched from API, it was not refreshing automatically on my frontend. Demo site

My Controller code:

@Controller
@AllArgsConstructor
public class AirplaneController {

private final AirplaneService airplaneService;

@GetMapping("/index")
public String getIndex(Model model) throws IOException {
    model.addAttribute("airplanes", airplaneService.getAirplanes());
    return "map";
}
}

My index JS:

    var map = L.map('map').setView([52.95, 19.23], 7);
var ciLayer = L.canvasIconLayer({}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var airplanes = [[${airplanes}]];

var icon = L.icon({
iconUrl: 'plane.png',

iconSize:     [15, 15], // size of the icon
iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
popupAnchor:  [-10, -10] // point from which the popup should open relative to the iconAnchor
});

airplanes.forEach(value => {
    var temp =L.marker([value.latitude, value.longitude], {icon: icon}).addTo(map).bindPopup("Flight " +value.callsign+" from "+value.origin_country);
    temp.setRotationAngle(value.heading);
})