[Vuejs]-How to iterate nested nested json array?

by

2👍

✅

mydata itself is an array, it doesn’t have a property called aggregated, it has a list of objects which contain aggregated. So you have to first loop over mydata.

Js Fiddle: https://jsfiddle.net/3r9aefqu/

Template

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

<div id="app">
  <!-- For each object in my mydata -->
  <div v-for="data in mydata">
    {{ data.t_registration_number }}
    <!-- For each aggregated inside each of mydata -->
    <div v-for="agg in data.aggregated">
      aaa :{{ agg.aaa }} bbb: {{ agg.bbb }}
      <div v-for="n in agg.nested">
        s_inn : {{n.s_inn}} s_kpp: {{ n.s_kpp }}
      </div>
      =======================
    </div>

  </div>
</div>

Vue

new Vue({
  el: '#app',
  data: {
    mydata: [{
      "t_registration_number": "0177200000918001354",
      "aggregated": [{
        "aaa": "8414440",
        "bbb": "95101",
        "nested": [{
          "s_inn": "1111111",
          "s_kpp": "2222222"
        }]
      }, {
        "aaa": "45770520",
        "bbb": "04641",
        "nested": [{
          "s_inn": "3333333",
          "s_kpp": "4444444"
        }]
      }]
    }]
  }
})

Output

0177200000918001354
aaa :8414440 bbb: 95101
s_inn : 1111111 s_kpp: 2222222
=======================
aaa :45770520 bbb: 04641
s_inn : 3333333 s_kpp: 4444444
=======================

Leave a comment