Vue iterating though object of arrays

Question

Im trying to loop through some data with different categories with data, that would look something like this:

10m

-2017
--name: cup1
--file: file1.pdf
--name: cup2
--file: file2.pdf
-2016
--name: cup1
--file: file1.pdf
--name: cup2
--file: file2.pdf

(and then the same under 15m - however i can only make it show under 10m)

The problem with my loop is, that it only shows under the first category (atm. "10m")

I'm using VueJS to do this.

var vm = new Vue({
  el: '#results',

  data: {
    results: [
  {
    "kategori": "10m",
    "year": [
      {
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  },
  {
    "kategori": "15m",
    "year": [{
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  }
]
,
  },

})

.category {
  font-weight: bold;
}

.year {
  margin-left: 5px;
  font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<main>
  <article id="results">
    <div v-for="(allCategory, index) in results" class="category">
      {{ allCategory.kategori }}
      <div v-for="(allYear, key) in results[index].year[index]" class="year">
        {{ key }}
      </div>
    </div>
  </article>
</main>

JSFiddle: https://jsfiddle.net/tj5413om/

Thanks in advance

I find it hard to explain, however, as in the data, the years (2017 and 2016) should be under both 15m and 10m. However the loop only writes it under 10m. — Carsten Andersen
– Carsten Andersen, Commented Dec 8, 2017 at 13:24
So basically. It should write the exact same under "15m" as under "10m" right now. jsfiddle.net/tj5413om/1 — Carsten Andersen
– Carsten Andersen, Commented Dec 8, 2017 at 13:25

samayo · Accepted Answer · 2017-12-08 13:32:25Z

2

The problem is inside your iteration index goes from 0 to 1: it's kinda hard to explain but look at this fiddle: https://jsfiddle.net/tj5413om/2/ and you will see key 0 and 1 replace second loop from, but your data is the same:

[ { "2016": [ { "name": "stævne", "file": "pdf.pdf" }, { "name": "stævne", "file": "pdf.pdf" } ], "2017": [ { "name": "stævne", "file": "pdf.pdf" }, { "name": "stævne", "file": "pdf.pdf" } ] } ]

This does not have key 1: It's only one array;

so replace your second loop from

<div v-for="(allYear, key) in results[index].year[index]" class="year">

to

 <div v-for="(allYear, key) in results[index].year[0]" class="year">

answered Dec 8, 2017 at 13:32

samayo

16.5k13 gold badges95 silver badges115 bronze badges

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

Collectives™ on Stack Overflow

Vue iterating though object of arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related