Vue.js - How to display all property keys and nested property values?

Question

Couldn't find a better title, my issue is hard to describe in one sentence. I'm trying to loop through an imported object generated by some third party package, but its structure is problematic:

obj: {
  "name1": {
    "property1": "value1",
    "property2": "value2",
  },
  "name2": {
    "property1": "value3",
    "property2": "value4",
  },
  "name3": {
    "property1": "value5",
    "property2": "value6",
  }
}

I want to display not just property1 and property2 but also the name preceding these:

- name1
  value1
  value2

- name2
  value3
  value4

...

This is the code I have so far:

<ul>
  <li v-for="(item, i) in obj" :key="index">
    {{ item.property1 }}
    <br>
    {{ item.property2 }}
  </li>
</ul>

How can I display the name as well, given this object' odd structure?

JSFiddle

Boussadjra Brahim · Accepted Answer · 2020-08-11 17:33:25Z

1

Just add key property in your v-for loop and render it :

 <li v-for="(item,key, i) in obj" :key="index">
     {{key}}
      <br>
     {{ item.property1 }}
      <br>
      {{ item.property2 }}
  </li>

answered Aug 11, 2020 at 17:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Owl · Accepted Answer · 2020-08-11 17:14:27Z

0

Loop the object key with Object.keys(), and display the object value from the key with another v-for

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="(item, i) in Object.keys(obj)" :key="index">
      {{ item }}
      <ul>
        <li v-for="(property, key) in obj[item]" :key="property">
          {{ key }} -> {{ property }}
        </li>
      </ul>
    </li>
  </ul>
</div>

edited Aug 11, 2020 at 17:14

answered Aug 11, 2020 at 17:09

Owl

6,9033 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to display all property keys and nested property values?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related