Vue处理后台返回List集合带有Object对象的数据
Vue JSON数组、JSON对象、数组的区别，请参考博客：
在Vue接收到后台的List集合数据中含有对象想转成数据对象的形式（Array）如图⼀；⽽不是Object，如图⼆。虽有各种遍历⽅法来提取想要的数据，但数据处理⽅式不唯⼀。
图⼀
图⼆
⽽它们常⽤的遍历⽅法如下：
<!-- 对象遍历 -->
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</div>
<!-- 数组对象遍历 -->
<div v-for="(value, key, index) in objectArray">
姓名：{{value.name}}
年龄:{{value.age}}
vuejson转对象</div>
1、将对象转换为JSON格式字符串
JSON.stringify(object)
2、将JSON字符串转换为对象
JSON.parse(jsonString);
⽐如在返回的的List集合中有⼀个course的Object  想把它装成Array的数据形式，这⼀来的好处是⽅便在<template></template>标签中遍历数据并提取某⼀条数据，免去⽤遍历对象的形式去获取（value, key, index）来确定某⼀条数据。（⽅法众多，数据处理⽅式各不⼀样，供参考）。⼤致代码如下：
this.list = [];
let newArray = [];
for (const i in res.data) {
for (const key in res.data[i].course) {
//console.log("属性:"+key);
this.$set(this.list, key, res.data[i].course[key]); //对象新增属性(使⽤Vue.$set())
newArray[i] = this.list;  //新建数组存放
// this.list.push(i + ':' + JSON.stringify(res.data[k].course[i]));
}
this.list = [];  //循环完必须清空，否则可能会覆盖
}
console.log('newArray---');
console.log(newArray);//打印转换结果
this.Course = newArray;
//特别适⽤于后台l的<resultMap></resultMap>中<association></association>的级联查询，外键映射并返回某个实体类转换结果如下：
返回的信息如下：
另外，还有⼀种⽐较便捷的⽅法就是：在数据绑定定义时声明，如下：
data() {
return {
json: {
course: {},
student: {},
teacher: {}
},
调⽤：如下
const that = this;
//axios的get请求
this.$axios
.get(url, params)
.then((res) => {
this.form = res.data;
//console.log('请求后台数据结果', res.data[0]);
this.json=res.data[0];
console.log('urse数据结果', urse);                })
.catch((err) => {
console.log(err);
});
调⽤结果如下：
后台返回的Json数据如下：
[
{
"courseID": "2",
"studentNumber": "1",
"teacherNumber": "T1",
"course": {
"courseID": "2",
"courseName": "Java2应⽤教程",
"courseTime": "08:00:00",
"courseDay": "2",
"classRoomID": "S202",
"courseWeek": 18,
"courseNote": ""
},
"student": {
"studentNumber": "00000",
"studentName": "Yimning",
"studentSex": "男"
},
"teacher": {
"teacherNumber": "1111",
"teacherName": "admin",
"teacherSex": "男",
"courseID": 2
},
"id": 6
},
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。