How to display an Object containing other Objects in Vue.js

Question

I'm new at using Vue.js and I was wondering how to display this JSON object:

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

in a list that has this structure:

<div>
<h1>The key of the object...</h1>
  <ul>
    <li>The list of all the strings inside the array</li>
  </ul>
</div>

[What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) Is this JSON data or an object? If it's JSON, you can convert it with `JSON.parse` — jabaa, Nov 22 '21 at 09:42
This is the only [JSON object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) — jabaa, Nov 22 '21 at 09:45

score 2 · Accepted Answer · answered Nov 22 '21 at 09:52

loop object and then loop the array inside, here is a working example

https://codesandbox.io/s/eager-leaf-nx2mq?file=/src/App.vue

<template>
  <div id="app">
    <div v-for="(value, propertyName) in data" :key="propertyName">
      <h1>The key of the {{ propertyName }}</h1>
      <ul>
        <li v-for="(item, index) in data[propertyName]" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      data: {
        1: ["15-16", "16-17", "17-18", "18-19"],
        2: ["15-16", "16-17", "17-18", "18-19"],
      },
    };
  },
};
</script>

Thanks, it works fine now that I followed your example. – Allennick Nov 22 '21 at 16:12 — Allennick, Nov 22 '21 at 16:12

score 2 · Answer 2 · answered Nov 22 '21 at 10:20

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>

Thank you for your answer! – Allennick Nov 22 '21 at 16:15 — Allennick, Nov 22 '21 at 16:15

score 1 · Answer 3 · answered Nov 22 '21 at 09:45

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.

score 1 · Answer 4 · answered Nov 22 '21 at 09:46

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!

Thanks for sharing all those informations, this is a valid answer as well. — Allennick, Nov 22 '21 at 16:13

score 1 · Answer 5 · answered Nov 22 '21 at 09:47

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

Thank you for your answer and for the link, I'll check it out later :D — Allennick, Nov 22 '21 at 16:14

How to display an Object containing other Objects in Vue.js

5 Answers5