javascript - JSON-objektin näyttäminen taulukkona käyttäen VueJS:ää

Olen yrittänyt näyttää VueJS:llä JSON-objektia, joka on saatu Laravel-sovelluksestani, joka käsittelee palvelinpuolen toimintoja. Kaikki apu otetaan ilolla vastaan.

Tässä on raakaa JSON-dataa Laravel-sovelluksestani:

[{
    "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
  }]

VueJS-koodini:

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

Tulos, jonka saan..

Tulos, jonka haluan saada:

| Month | OpeningPrincipal  | PrincipalTaken  | Interest  | Payment | RepaymentDate | ClosingPrincipal  |
|-------|-------------------|-----------------|-----------|---------|---------------|-------------------|
| 1     | 7000              | 3475.55         | 6300      | 9775.55 | Mar 17, 2018  | 66524.45          |

ja niin edelleen, kunnes 12x7-taulukko on valmis.

Kiitos!!!

MUOKKAA>> Olen päättänyt lähettää JSON-vastauksen Laravel-sovelluksestani, mutta en silti osaa vielä selvittää, miten saavutan tavoitteeni. JSON-objekti on esitetty tässä:

Vastaus #1

Ratkaisin sen tekemällä tämän

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>

muuttamalla vain tr- ja td-tageja v-for:ien kohdalla näin:

<tr v-for="loan in loans[0]">
                <td v-for="otherloan in loans">{{otherloan[loan]}}</td>

            </tr>

Vastaus #2

Oikea ratkaisu kävisi lainojen läpi ja loisi taulukkorivin jokaiselle. Sisempi silmukka kävisi läpi lainan ominaisuudet ja näyttäisi taulukkosolun kunkin arvolla.