For the difference between Vue JSON array, JSON object, and array, please refer to the blog: Differences between JSON array, JSON object, and array

The List collection data received by Vue in the background contains objects that want to be converted into data objects (Array) as shown in Figure 1; instead of Object, as shown in Figure 2. Although there are various traversal methods to extract the desired data, the data processing method is not unique.

Figure 1

Figure II

And their commonly used traversal methods are as follows:

  <!-- 对象遍历 -->
  <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);

For example, in the returned List collection, there is a course Object and you want to pack it into the data form of Array. The advantage of this is that it is convenient to traverse the data in the <template></template> tag and extract a certain piece of data, eliminating the need to Use the form of traversing objects to obtain (value, key, index) to determine a certain piece of data. (There are many methods and different data processing methods, for reference). The general code is as follows:

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>的级联查询，外键映射并返回某个实体类

The conversion result is as follows:

The returned information is as follows:

In addition, there is another more convenient method: declare in the data binding definition, as follows:

    data() {
        return {
            json: {
                course: {},
                student: {},
                teacher: {}
            },

Call: as follows

            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);
                });

The result of the call is as follows:

The Json data returned by the background is as follows:

[
  {
    "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
  },
]

Vue processes the background and returns the data of the List collection with the Object object

In addition, there is another more convenient method: declare in the data binding definition, as follows:

Guess you like