Can't access individual data in JSON object: how do I single out data form a JSON object into VUE

Question

I have searched all over stack and the internet for help but can't seem to find anything that helps with my issue.

I am currently trying to read data from a JSON file stored in my Vue src folder. The file consists of three arrays but the array name has been created with dots. Since the file is local, I could go in and change the name of the array but eventually I will have Vue reading this information dynamically from a web server so I don't want to change anything as I won't be able to do that in the future.

I would like to parse only a few bits of information from the file but can't seem to single that information out.

Here is the JSON:

 {
  "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"
}
}

And here is my Vue Script section:

 import roomIndex from '../serv.json';

  export default {
   name: 'HelloWorld',
   data() {
       return {
           roomIndex
       }
   },

And here I try to call it in my template section:

<p v-for="dt in roomIndex">{{ dt.date }} </p>

As of right now when I use this format I can get all the dates in the JSON file just fine but if I write:

  <p v-for="dt in roomIndex">{{dt[0].date }}</p>

trying to single out only the first date, I get this error: Error in render: "TypeError: Cannot read property 'date' of undefined"

I have tried so many things like putting the array name within brackets like:

 <p v-for="dt in roomIndex">{{ dt.[staging_nr_front_33.333.33.333].date }}</p>

But that didn't work either.

How can I only get the date object from the first array?

I am so new to Vue and JSON so please bear with me if this is an easy answer or my code is completely wacky...

Thanks for your help!!!!

Answer 1

As mentioned in another comment it looks like it is an object rather than an array which is why it's not responding the way I felt like it should. since I need to display the date and key of each server (but in separate parts of the page) I came up with this:

<div  v-for="(value, key, index) in roomIndex">
      <div class="box>
        <h2>{{ key }}</h2>
        <h1>Server Status</h1>
        <div  class="circle" :class="value.webserver"></div>
           <h3>Date</h3>
        </div>
       </div>
</div>

This gave me a box where the name of the server was outputted as well as the date and a coloured circle depending on the state of the server for each server. It seemed to solve my issues.

Thanks for all of your help!