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

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>

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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!

CodePudding user response：

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>

CodePudding user response：

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>