javascript 使用 VueJS 将 JSON 对象显示到表格中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48812869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying JSON object into a table using VueJS
提问by Kingsley
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.
我一直在尝试使用 VueJS 显示从我的 laravel 应用程序获取的 JSON 对象，该应用程序正在处理我的服务器端操作。任何形式的帮助将不胜感激。
Here is the raw JSON data from my laravel app:
这是来自我的 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
}]
My VueJS code:
我的 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>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.
依此类推，直到 12x7 表完成。
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:
编辑>>我决定从我的 laravel 应用程序发送一个 JSON 响应，但我仍然不知道如何实现我的目标。JSON 对象如下所示：
采纳答案by Ahmed Ali Thabet
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 和 td 标签 v-for：
<tr v-for="loan in loans[0]">
<td v-for="otherloan in loans">{{otherloan[loan]}}</td>
</tr>
回答by Tom Russell
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.
一个合适的解决方案是迭代贷款，为每个贷款创建一个表格行。内部循环将遍历贷款的属性并显示一个包含每个值的表格单元格。
