Retrieve Data from JSON Data Structure in Vue.js

I want retrieve Data from meal table (json data schema) to a table form in the browser. The retrievement works but unfortunately I do not know how to retrieve the data of the weekdays from my meal table and show them in the table.

How can I retrieve Monday, Tuesday, Wednesday, Thursday and Friday???

JSON DATA SCHEMA:

// 20200901152958 // http://localhost:8080/mealtable/weekly/1

{
  "id": 1,
  "calendarWeek": 1,
  "mealTableWeek": {
    "Monday": {
      "id": 4,
      "name": "Burger",
      "type": "fleischhaltig",
      "price": 2.60
    },
    "Tuesday": {
      "id": 3,
      "name": "Reishänchenpfanne",
      "type": "fleischhaltig",
      "price": 2.60
    },
    "Wednesday": {
      "id": 1,
      "name": "Vollkornnudeln",
      "type": "vegan",
      "price": 2.30
    },
    "Thursday": {
      "id": 5,
      "name": "Kartoffelpüree",
      "type": "vegetarisch",
      "price": 2.30
    },
    "Friday": {
      "id": 2,
      "name": "Falafel",
      "type": "vegan",
      "price": 1.90
    }
  }
}

MealTablWeekComponent.vue:

 <template>
  <div class="container">
    <h3>Meal Table</h3>
    <div class="container">
      <table class="table">
        <thead>
        <tr>
          <th scope="col">#</th>
          <th>Meal</th>
          <th>Type</th>
          <th>Price in $</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="d in mealTables.mealTableWeek" v-bind:key="d.id">
          <th></th>
          <td>{{d.name}}</td>
          <td>{{d.type}}</td>
          <td>{{d.price}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import MealTableDataService from "@/service/MealTableDataService";

export default {
  name: "MealTableWeekComponent",
  data() {
    return {
      mealTables: {
        id: " ",
        mealTableWeek: {
          name: {
            id: " ",
            name: " ",
            type: " ",
            price: " "
          }
        }
      }
    };
  },

  methods: {
    refreshMealTable() {
      const id = this.$route.params.id;
      MealTableDataService.retrieveMealTableById(id)
          .then(response => {
            console.log(response)
            this.mealTables = response.data;
          });
    }
  },
  created() {
    this.refreshMealTable();

  }
};
</script>

<style scoped lang="scss">

</style>

View in the Browser:

Output

Solution

<tr v-for="(d, key) in mealTables.mealTableWeek" v-bind:key="d.id">
    <td>{{key}}</td>
    <td>{{d.name}}</td>
    <td>{{d.type}}</td>
    <td>{{d.price}}</td>
</tr>