[Vuejs]-How to display an Object containing other Objects in Vue.js

Try the below approach

var app = new Vue({
 el: '#app',
 data() {
  return {
   obj:{
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
   }
  };
 },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Iterating the list</h1>
  <ul v-for="(item, attr) in obj" :key="attr"> Item {{attr}}
   <li v-for="(val, index) in item" :key="index">{{val}}</li>
  </ul>
</div>

in vue template you can loop through an object:

<template>
  <div>
    <div v-for="(value, key) in yourObject" :key="key">
      <h1>{{ key }}</h1>
      <ul>
        <li v-for="item in value" :key="'sub' + item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'myComponent',
  data() {
    return {
      yourObject: {
        "1": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ],
        "2": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ]
      }
    }
  }
}
</script>
<style>
</style>

• you cant loop your root tag in a component so i put my loop in a div.
• remember to add key when you want to loop in your template. key must have a unique value.

The easiest way is to use a v-for. It’s in relation to a for-loop in other programming languages.

The syntax for this code is looking like this:

<div v-for="item in json" :key="item"></div>

Based on what you want to show a single v-for or a nested v-for.

NOTICE: I’ve named your json json for better understanding.

ONE V-FOR LOOP:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    {{firstLoop}}
  </div>
</template>

OUTPUT:
{ "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ "15-16", "16-17", "17-18", "18-19" ] }

TWO V-FOR LOOPS:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      {{secondLoop}}
    </div>
  </div>
</template>

OUTPUT:
[ "15-16", "16-17", "17-18", "18-19" ]
[ "15-16", "16-17", "17-18", "18-19" ]

THREE V-FOR LOOPS:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      <div v-for="thirdLoop in secondLoop" :key="thirdLoop">
        {{thirdLoop}}
      </div>
    </div>
  </div>
</template>

OUTPUT:
15-16
16-17
17-18
18-19
15-16
16-17
17-18
18-19

For understanding: You are looping over an json or array which you will define, than you set the key (important!). You can see based on OUTPUT which I’ve written after every loop how the syntax is working and can try it out for your own.

You can also an index to your v-for than you have to write it like this:

<div v-for="(item, index) in json" :key="index">

Than you can reference everything on your index.

Hopefully this answer helps you out!

With Javascripts Object.entries() you can get the objects properties as key-value pairs that you can loop through.

So, for example if you have your object

const obj = {
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
}

You can iterate over it in your template by writing something like this

<div 
   v-for="(key, value) in Object.entries(obj)"
   :key="key"
>
   <h1>{{ key }}</h1>
   <ul>
      <li>{{ value }}</li>
   </ul>
</div>

Read more at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries