I am currently working on a project that involves extracting data from a website that monitors traffic jams and maintenance work. My goal is to specifically retrieve information about traffic jams and display them individually.
The code I am using utilizes Axios to fetch data from a fixed URL: . I have successfully managed to extract relevant details from this file:
{{roadEntries[0].events.trafficJams[0].from}} => Starting point of the jam
{{roadEntries[0].events.trafficJams[0].to}} => End point of the jamexport default {
name: "Melding",
data() {
return {
datum: {},
roads: {},
informations: {},
roadEntries: {},
}
},
mounted() {
const axios = require('axios');
const api = 'https://www.anwb.nl/feeds/gethf';
// Making a request for specific data
axios.get(api).then((response) => {
this.informations = response.data;
this.datum = response.data.dateTime;
this.roadEntries = response.data.roadEntries;
this.roads = response.data.roadEntries;
})
}
}
Template:
<div>
<p>{{ datum }}</p>
<hr>
{{roadEntries[0].road}}
{{roadEntries[0].events.trafficJams[0].from}}
{{roadEntries[0].events.trafficJams[0].to}}
</div>While I succeeded in storing the "from" data(), attempting to loop through it resulted in displaying individual letters rather than complete words.
Additionally, due to the presence of arrays within the information file, processing the data has proven challenging. Extracting the "datum" was straightforward as it consisted of just one static string.
I would greatly appreciate some guidance on how to effectively iterate through each entry in the file and showcase them in the template.