Despite my extensive searching on Stack and the internet, I have not been able to find a solution to my problem.
Currently, I am attempting to retrieve data from a JSON file located in the Vue src folder. The file contains three arrays with names that include dots. While I could manually edit the array names since the file is local, I want Vue to dynamically retrieve this information from a web server in the future, so I don't want to make any changes now.
I only need to extract specific bits of information from the file but I am struggling to isolate that data.
The following is the JSON data:
{
"staging_nr_front_33.333.33.333 ": {
"date": "2018-09-10 13:05:02",
"webserver": "running",
"memory": "79MB of 527MB available",
"token_status": "present",
"space": "5.3G of 16G used (34%) 11G available"
},
"staging_roll_444.444.444.44 ": {
"date": "2018-09-10 13:02:44",
"webserver": "running",
"memory": "391MB of 993MB available",
"token_status": "present",
"space": "4.3G of 39G used (12%) 32G available"
},
"staging_nr_cont_55.555.555.555 ": {
"date": "2018-09-10 13:05:02",
"webserver": "running",
"memory": "94MB of 7302MB available",
"token_status": "present",
"space": "3.9G of 7.8G used (50%) 3.9G available"
}
}
Below is my Vue Script section:
import roomIndex from '../serv.json';
export default {
name: 'HelloWorld',
data() {
return {
roomIndex
}
},
And here is how I'm trying to access it in my template section:
<p v-for="dt in roomIndex">{{ dt.date }} </p>
Currently, using this format allows me to successfully retrieve all the dates in the JSON file. However, when I try to single out just the first date by writing:
<p v-for="dt in roomIndex">{{dt[0].date }}</p>
I receive an error: Error in render: "TypeError: Cannot read property 'date' of undefined"
I have attempted various approaches such as enclosing the array name in brackets like:
<p v-for="dt in roomIndex">{{ dt.[staging_nr_front_33.333.33.333].date }}</p>
Unfortunately, that did not work either.
How can I specifically retrieve the date object from the first array?
As a newcomer to Vue and JSON, I appreciate your patience if this is a simple fix or if my code seems unusual...
Thank you for your assistance!!!!