Vue JSON 配列、JSON オブジェクト、配列の違いについては、ブログ「JSON 配列、JSON オブジェクト、配列の違い」を参照してください。
バックグラウンドで Vue が受信した List コレクション データには、図 2 に示すように、オブジェクトではなく、図 1 に示すようにデータ オブジェクト (配列) に変換するオブジェクトが含まれています。目的のデータを抽出するにはさまざまなトラバーサル手法がありますが、データ処理手法は一意ではありません。
図1
図Ⅱ
一般的に使用される走査方法は次のとおりです。
<!-- 对象遍历 -->
<div v-for="(value, key, index) in object">
{
{ index }}. {
{ key }} - {
{ value }}
</div>
<!-- 数组对象遍历 -->
<div v-for="(value, key, index) in objectArray">
姓名：{
{value.name}}
年龄:{
{value.age}}
</div>1、将对象转换为JSON格式字符串
JSON.stringify(object)
2、将JSON字符串转换为对象
JSON.parse(jsonString);たとえば、返された List コレクションにはコース オブジェクトがあり、それを Array のデータ フォームにパックしたいとします。この利点は、<template></template> タグ内のデータを横断するのに便利であることです。特定のデータ部分を抽出することで、特定のデータ部分を決定するために (値、キー、インデックス) を取得するためにオブジェクトを走査する形式を使用する必要がなくなります。(参考のために、多くの方法と異なるデータ処理方法があります)。一般的なコードは次のとおりです。
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;
//特别适用于后台Mapper.xml的<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('this.json.course数据结果', this.json.course);
})
.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
},
]