Is there a way to properly handle the successful fetch event before executing the loadMarkers() method? I keep encountering an error because monitorsData.monitors is undefined.
I attempted using await with fetch but I'm unsure of the correct usage.
data(){
return{
monitorsData:'',
timer:'',
loading:false,
message:'60200950',
markers: [],
}
},
created(){
this.searchStation()
this.loadMarkers()
this.timer = setInterval(this.searchStation, 50000)
},
methods:{
loadMarkers(){
for(let i = 0; i < this.monitorsData.monitors.length; i++){
this.markers.push({id: i, position: {lat: this.monitorsData.monitors[i].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[i].locationStop.geometry.coordinates[1]}})
}
},
searchStation(){
this.loading=true
var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
targetUrl = 'http://www.wienerlinien.at/ogd_realtime/monitor?DIVA='+ this.message+ '&activateTrafficInfo=stoerungkurz'
fetch(proxyUrl + targetUrl)
.then(response => response.json())
.then(jsonData => this.monitorsData = jsonData.data)
.catch(e => console.log(e))
this.loading = false
this.message = ''
},
},
In addition, I am unsure how to address the same issue in computed properties.
computed:{
mapConfig() {
return{
...mapSettings,
zoom: 8,
center: {lat: this.monitorsData.monitors[0].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[0].locationStop.geometry.coordinates[1]}
}
}
},