Displaying JSON object into a table using VueJS

Question

I have been trying to display using VueJS a JSON object got from my laravel app which is handling my server side operations. Any form of help would be appreciated.

Here is the raw JSON data from my laravel app:

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

My VueJS code:

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

The result I'm getting..

The result I wish to get:

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

and so on till the 12x7 table is complete.

Thanks!!!

EDIT>> I have decided to send a JSON response from my laravel app but I can't still figure out how to achieve my goal. The JSON object is shown here:

Solution 1

I solved it by making this

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>

by only changing the tr and td tags v-for's like this:

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

            </tr>

Solution 2

A proper solution would iterate over the loans, creating a table row for each. The inner loop would iterate over the properties of a loan and display a table cell with each one's value.

Comments

[Derek Pollard]

really though, shouldn't you be looping through the array, then the object? What if the array represents rows, and the object represents the columns (as it seems to me it does in the OP)

[Ahmed Ali Thabet]

@Derak if you mean that it's an object of arrays the same method gonna work :)