使用 VueJS 将 JSON 对象显示到表格中

【问题标题】：Displaying JSON object into a table using VueJS使用 VueJS 将 JSON 对象显示到表格中
【发布时间】：2018-07-26 13:00:40
【问题描述】：

我一直在尝试使用 VueJS 显示从我的 laravel 应用程序获取的 JSON 对象，该应用程序正在处理我的服务器端操作。 任何形式的帮助都将不胜感激。

这是来自我的 laravel 应用程序的原始 JSON 数据：

[{
    "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 代码：

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

我得到的结果..

我希望得到的结果：

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

以此类推，直到 12x7 表格完成。

谢谢！！！

编辑>> 我已决定从我的 laravel 应用程序发送 JSON 响应，但我仍然无法弄清楚如何实现我的目标。 JSON 对象如下所示：

【问题讨论】：

• 我认为首先要做的是格式化您的响应，因此它会发送按对象组合的数据，而不是按字段类型。
• 感谢@AntonStepanenkov。请参阅帖子下方的编辑>>。我已经从我的 laravel 应用程序发送了一个 JSON 对象作为响应，但仍然不知道从这里去哪里。任何帮助将不胜感激..
• 我的意思是你的回复应该是这样的：[{Month: 1, OpeningPrincipal: 7000, ...}, {Month: 2, OpeningPrincipal: 8000, ...}] 所以你可以遍历对象数组并每行显示一个对象。
• 感谢@AntonStepanenkov 的洞察力。我终于想出了如何显示它。我只需要在 而不是 中包含“v-for”标签，然后循环遍历它。
• @Kingsley 正如 Anton 指出的那样，分组应该更好。我这里的 2 美分是最好注意 Array 和 Object 的含义。数组用于帮助我们对事物进行分组，对象用于表示具体事物，例如您示例中的金融实体，因此对象必须包含属性，例如“月”、“原则”等。数组应该将这些对象组合在一起。所以最好先处理 API（服务器端代码）。另外，您有两个 for 循环，将一个放在 上，因为您想为每一行重复对象：这意味着 .