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:

I think first thing to do is format your response, so it would send data combined by objects, and not by field types. — Anton Stepanenkov
– Anton Stepanenkov, Commented Feb 15, 2018 at 17:28
Thanks @AntonStepanenkov . Please see the Edit>> below the post. I have sent a JSON object as a response from my laravel app but still can't figure out where to go from here. Any help will be appreciated.. — Kingsley Abia
– Kingsley Abia, Commented Feb 15, 2018 at 17:44
i meant that your response should look like this : [{Month: 1, OpeningPrincipal: 7000, ...}, {Month: 2, OpeningPrincipal: 8000, ...}] so you could iterate thru array of objects and display one object per line. — Anton Stepanenkov
– Anton Stepanenkov, Commented Feb 15, 2018 at 17:47
Thanks @AntonStepanenkov for your insight. I finally figured how to display it. I just needed to include the 'v-for' tag in the <tr> and not the <td>, then loop through it. — Kingsley Abia
– Kingsley Abia, Commented Feb 15, 2018 at 18:25
@Kingsley as Anton pointed out, grouping should be better. My 2 cents here is that it is better to pay attention to the meanings of Array and Object. Arrays are here to help us group things and objects are here to represent a concrete thing, like a financial entity in your example so an object must contain attributes, e.g. "month", "principle" etc. And array should group these objects together. So better work on the API (server side code) first. Separately you have two for loops, drop the one on <td> since you want to repeat objects for each line: which means <tr>. — CM.
– CM., Commented Feb 15, 2018 at 19:29

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related