CODEWITHSUNDEEP
vue.jsvuejs2
Sean
Sean

Reputation: 2577

v-for with dynamic keys

Very new to Vuejs 2. Have a question on how to enumerate through a dynamic set of data that has a dynamic key? Take this data for instance (this is from a 3rd party -- so unable to change data -- and shortened for readability):

{
  "143": {
    "account_id": 1,
    "name": "Account 1",
    "groups": [
      {
        "1610": {
          "name": "Group 1610",
          "meetings": [
            {
              "20170816": [
                {
                  "id": 10755,
                  "name": "Untitled"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Then I have a .vue file that has a template that does this:

<div v-for="(account, accountKey) in accounts">
    <div>{{ account.name }} ({{ accountKey }})</div>
    <div v-for="(group, groupKey) in groups">
        <div>{{ group.name }} ({{ groupKey }})</div>
        <div v-for="(meeting, meetingKey) in meetings">
            <div>{{ meeting.name }} ({{ meetingKey }})</div>
        </div>
    </div>
</div>

This doesn't render anything. There are several things I need to here, but not sure how to accomplish in Vuejs.

  1. Need to be able to pull the key (as it's the identifier) for each of the records.
  2. Need to be able to access the individual data on record, of course.

Anyone come across something similar that can help with?

Thanks!

Upvotes: 0

Views: 2313

Answers (1)

Bert
Bert

Reputation: 82459

That might be one of the worst data structures I've ever seen.

Here is a template that works as I think you intend.

<div v-for="(account, accountKey) in accounts">
  <div>{{ account.name }} ({{ accountKey }})</div>
  <div v-for="group in account.groups">
    <div v-for="grp, grpKey in group">
      <div>{{ grp.name }} ({{ grpKey }})</div>
      <div v-for="(meeting, meetingKey) in grp.meetings">
        <div v-for="mtg, mtgKey in meeting">
          <div v-for="m in mtg">{{ m.name }} ({{ mtgKey }})</div>
        </div>
      </div>
    </div>
  </div>
</div>

Groups is an array of objects that have their own set of keys so you need to iterate over that, and then iterate again over each object inside the group.

Meetings is the same kind of thing, an array of objects with their own keys, but it doubles down and each of the key values is an array that... has to be iterated over again.

console.clear()

new Vue({
  el: "#app",
  data:{
    accounts: {
      "143": {
        "account_id": 1,
        "name": "Account 1",
        "groups": [
          {
            "1610": {
              "name": "Group 1610",
              "meetings": [
                {
                  "20170816": [
                    {
                      "id": 10755,
                      "name": "Untitled"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    }
  }
})
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <div v-for="(account, accountKey) in accounts">
    <div>{{ account.name }} ({{ accountKey }})</div>
    <div v-for="group in account.groups">
      <div v-for="grp, grpKey in group">
        <div>{{ grp.name }} ({{ grpKey }})</div>
        <div v-for="(meeting, meetingKey) in grp.meetings">
          <div v-for="mtg, mtgKey in meeting">
            <div v-for="m in mtg">{{ m.name }} ({{ mtgKey }})</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

It would probably be worthwhile transforming that data into a sane data structure with a computed value and iterating over the computed.

Upvotes: 1

Related Questions