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:

Ahmed Ali Thabet · Accepted Answer · 2018-02-16 04:19:12Z

5

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>

answered Feb 16, 2018 at 4:19

Ahmed Ali Thabet

3012 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Pollard Over a year ago

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 Over a year ago

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

Tom Russell · Accepted Answer · 2018-12-08 07:37:43Z

1

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.

answered Dec 8, 2018 at 7:37

Tom Russell

1,0732 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Displaying JSON object into a table using VueJS

2 Answers 2

2 Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Displaying JSON object into a table using VueJS

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest