javascript - Zobrazení JSON objektu do tabulky pomocí VueJS
Snažím se pomocí VueJS zobrazit JSON objekt, který jsem získal ze své aplikace Laravel, která zpracovává mé serverové operace. Každá forma pomoci by byla oceněna.
Zde jsou surová data JSON z mé aplikace Laravel:
[{
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12
},
{
"1": 70000,
"2": 66524.45,
"3": 62736.11,
"4": 58606.81,
"5": 54105.88,
"6": 49199.86,
"7": 43852.3,
"8": 38023.47,
"9": 31670.03,
"10": 24744.79,
"11": 17196.27,
"12": 8968.39
},
{
"1": 3475.55,
"2": 3788.35,
"3": 4129.3,
"4": 4500.93,
"5": 4906.02,
"6": 5347.56,
"7": 5828.84,
"8": 6353.43,
"9": 6925.24,
"10": 7548.52,
"11": 8227.88,
"12": 8968.39
},
{
"1": 6300,
"2": 5987.2,
"3": 5646.25,
"4": 5274.61,
"5": 4869.53,
"6": 4427.99,
"7": 3946.71,
"8": 3422.11,
"9": 2850.3,
"10": 2227.03,
"11": 1547.66,
"12": 807.16
},
{
"1": 9775.55,
"2": 9775.55,
"3": 9775.55,
"4": 9775.55,
"5": 9775.55,
"6": 9775.55,
"7": 9775.55,
"8": 9775.55,
"9": 9775.55,
"10": 9775.55,
"11": 9775.55,
"12": 9775.55
},
{
"1": "Mar 17, 2018",
"2": "Apr 16, 2018",
"3": "May 16, 2018",
"4": "Jun 15, 2018",
"5": "Jul 15, 2018",
"6": "Aug 14, 2018",
"7": "Sep 13, 2018",
"8": "Oct 13, 2018",
"9": "Nov 12, 2018",
"10": "Dec 12, 2018",
"11": "Jan 11, 2019",
"12": "Feb 10, 2019"
},
{
"1": 66524.45,
"2": 62736.11,
"3": 58606.81,
"4": 54105.88,
"5": 49199.86,
"6": 43852.3,
"7": 38023.47,
"8": 31670.03,
"9": 24744.79,
"10": 17196.27,
"11": 8968.39,
"12": 0
}]
Můj kód ve VueJS:
<template>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th> Month</th>
<th> Opening Principal</th>
<th> Principal Taken</th>
<th> Interest</th>
<th> Payment</th>
<th> Repayment Date</th>
<th> Closing Principal</th>
</tr>
</thead>
<tr v-for="loans in loans">
<td v-for="loan in loans">{{loan}}</td>
</tr>
</table>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
loans: ''
}
},
created () {
this.$http.get('http://localhost:9000/api/loans/repayment')
.then(
response => {
this.loans = response.body
// console.log(response)
})
.catch(function(error){
console.log(error)
})
}
}
</script>
<style type="text/css">
ul{
list-style: none;
}
li{
display: inline;
}
</style>Výsledek, který dostávám..
Výsledek, který si přeji získat:
| Month | OpeningPrincipal | PrincipalTaken | Interest | Payment | RepaymentDate | ClosingPrincipal |
|-------|-------------------|-----------------|-----------|---------|---------------|-------------------|
| 1 | 7000 | 3475.55 | 6300 | 9775.55 | Mar 17, 2018 | 66524.45 |
a tak dále, dokud nebude tabulka 12x7 kompletní.
Díky!!!
EDIT>> Rozhodl jsem se poslat odpověď ve formátu JSON z mé aplikace Laravel, ale stále nemohu přijít na to, jak svého cíle dosáhnout. JSON objekt je zobrazen zde:
Odpověď č. 1
Vyřešil jsem to tím, že jsem to udělal
var vue = new Vue({
el:'#textExample',
data:{
loans:[ { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "11": 11, "12": 12 }, { "1": 70000, "2": 66524.45, "3": 62736.11, "4": 58606.81, "5": 54105.88, "6": 49199.86, "7": 43852.3, "8": 38023.47, "9": 31670.03, "10": 24744.79, "11": 17196.27, "12": 8968.39 }, { "1": 3475.55, "2": 3788.35, "3": 4129.3, "4": 4500.93, "5": 4906.02, "6": 5347.56, "7": 5828.84, "8": 6353.43, "9": 6925.24, "10": 7548.52, "11": 8227.88, "12": 8968.39 }, { "1": 6300, "2": 5987.2, "3": 5646.25, "4": 5274.61, "5": 4869.53, "6": 4427.99, "7": 3946.71, "8": 3422.11, "9": 2850.3, "10": 2227.03, "11": 1547.66, "12": 807.16 }, { "1": 9775.55, "2": 9775.55, "3": 9775.55, "4": 9775.55, "5": 9775.55, "6": 9775.55, "7": 9775.55, "8": 9775.55, "9": 9775.55, "10": 9775.55, "11": 9775.55, "12": 9775.55 }, { "1": "Mar 17, 2018", "2": "Apr 16, 2018", "3": "May 16, 2018", "4": "Jun 15, 2018", "5": "Jul 15, 2018", "6": "Aug 14, 2018", "7": "Sep 13, 2018", "8": "Oct 13, 2018", "9": "Nov 12, 2018", "10": "Dec 12, 2018", "11": "Jan 11, 2019", "12": "Feb 10, 2019" }, { "1": 66524.45, "2": 62736.11, "3": 58606.81, "4": 54105.88, "5": 49199.86, "6": 43852.3, "7": 38023.47, "8": 31670.03, "9": 24744.79, "10": 17196.27, "11": 8968.39, "12": 0 } ]
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="textExample">
<table class="table table-bordered">
<thead>
<tr>
<th> Month</th>
<th> Opening Principal</th>
<th> Principal Taken</th>
<th> Interest</th>
<th> Payment</th>
<th> Repayment Date</th>
<th> Closing Principal</th>
</tr>
</thead>
<tr v-for="loan in loans[0]">
<td v-for="otherloan in loans">{{otherloan[loan]}}</td>
</tr>
</table>
</div>pouze změnou atributů v-for u tagů tr a td takto:
<tr v-for="loan in loans[0]">
<td v-for="otherloan in loans">{{otherloan[loan]}}</td>
</tr>
Odpověď č. 2
Správné řešení by iterovalo přes půjčky a pro každou vytvářelo řádek tabulky. Vnitřní smyčka by iterovala přes vlastnosti půjčky a zobrazovala buňku tabulky s hodnotou každé z nich.