How to iterate nested nested json array? - vue.js

Question

I am trying to iterate nested json array, but I can't figure out how to do it. Here is my code:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="agreg in mydata.aggregated">
<p>
<!-- I need to iterate over nested i.e: s_inn, s_kpp -->
</p>
</div>
</div>
App code:
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"
}
]
}
]
}
]
}
})
https://jsfiddle.net/k37e28sp/1/

Answer 1

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
=======================