How to loop through 2-d array to display data on page? - arrays

Question

This API is returning a 2-d array like this
I want to use these values to iterate and display on my page like this
I've looked through vue documentation but list rendering doesn't work. Is there any way I can do this with v-for or any other method?

Answer 1

There are two ways:
One is to convert array to the object array and iterate as v-for and value.date and value.price in v-for=" value in array"
[{
date: 'dd//mm/yy',
price: 3242,
}]
Other is to use array like this, written in a way elements in array should ] be constant, where value[0] is your price ad value[1] is your date.
<div v-for="value in array">
{{value[0]}} {{value[1]}}
</div>

Answer 2

If i understand you correctly, try like following snippet :
new Vue({
el: '#demo',
data(){
return {
sections: [
[699962583, 'Sep 17'],
[12665354, 'Sep 17'],
[739845240, 'Sep 17']
]
}
},
computed: {
currentPrize(){
// put logic to get current prize
return 6543210
}
}
})
ul {
display: flex;
flex-direction: column;
justify-content: center;
width: 300px;
}
li, .heading {
display: flex;
align-items: center;
justify-content: space-between;
}
h1, h3, h5 {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
<h1>Past Prizes</h1>
<div class="heading">
<h5>Current prizes</h5><h3>$ {{ currentPrize }}</h3>
</div>
<li v-for="(section, index) in sections" :key="index">
<h5>{{ section[1] }}</h5><span>$ {{ section[0] }}</span>
</li>
</ul>
</div>

Answer 3

You can do it simply by looping over and destructing the sub-array in the v-for directive. Refer to the sample below:
Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
el: '#app',
data() {
return {
sections: [
[699962583, 'Sep 17'],
[12665354, 'Sep 17'],
[739845240, 'Sep 17']
]
}
},
computed: {
currentPrize() {
return this.sections.reduce(function(prev, current){ return prev += current[0]; }, 0);
}
}
})
ul {
list-style-type: none;
width: 400px;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>Past Prizes</h1>
<ul>
<li><span>Current prizes</span><span>${{ currentPrize }}</span></li>
<li v-for="([prize, date], index) in sections" :key="index">
<span>{{ date }}</span> <span>${{ prize }}</span>
</li>
</ul>
</div>