Vue Error 04: Failed to render a "combined data" in the form

Problem Description

When I was working on a management system project today, I encountered a strange problem. My combined data doesn't show:
Rendering 01:

The data printed on the console is as follows:
Debug Figure 01:

As shown in the image, the data is printed, but the table is not rendered.

problem analysis

My datatable is split into two:
student – ​​store the existing student information table (imported resources, only the status bar register used to mark whether they are registered can be modified)
user - stores the current system user table (including administrators). The following is a partial data display:


So the tableData I need to show is a combined data, as debug pic 01, shows. You need to query from two tables in turn. My approach is as follows:

//initialization list
    showInfo() {
      //When the page is loaded, send the request, get the form data
      //The first request, get the current user table information
      this.axios.post(this.base_url + "/home/info", {//callback function 1
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //The second request, query the student information table, integrate the name into the table data
        let temp = [];//for staging data
        for(let i=0;i<res.data.length;i++){
          //When the user's student ID information is not empty, send a request
          if(res.data[i].studentId!=null){
            this.axios.post(this.base_url+"/home/search",{//callback function 2
              tableName:'student',data:{studentId:res.data[i].studentId}})
            .then((response)=>{
              console.log(response);
              let obj = {};//Used to temporarily store each data object
              obj = res.data[i];
              obj.name = response.data[0].name;//Combine data
              temp[i] = obj;
            })
          }else{
            temp[i] = res.data[i];
          }
          if(i==res.data.length-1){
            this.tableData = temp;//After the processing is complete, assign a value to tableData
          }
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

problem solved

Due to the operating mechanism of JavaScript (refer to: JavaScript - Detailed Explanation of Running Mechanism ), the callback function will be placed in the task queue and executed at the end. This is why - debug diagram 01 - tableData will have empty*12. Both judgment and assignment should be placed in -callback function 2-. Attached code:

 //initialization list
    showInfo() {
      //When the page is loaded, send the request, get the form data
      //The first request, get the current user table information
      this.axios.post(this.base_url + "/home/info", {
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //The second request, query the student information table, integrate the name into the table data
        let temp = [];
        for(let i=0;i<res.data.length;i++){
            this.axios.post(this.base_url+"/home/search",{
              tableName:'student',data:{studentId:res.data[i].studentId}})//When the student account is empty, the query result is also empty
            .then((response)=>{
              console.log(response);
              let obj = {};
              obj = res.data[i];
              if(response.data.length==0){
                obj.name = ''
              }else{
                obj.name = response.data[0].name;
              }temp[i] = obj;
              if(i==res.data.length-1){
                console.log("temp:",temp);
                this.tableData = temp;
                console.log("tableData:",this.tableData);
              }
            })
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

The result of running in the background:
Debug Figure 02:

Front-end browser debugging:
Debug Figure 03:

Perfect solution to the problem!
Rendering 02:

Summarize:
Please remember that JavaScript's operating mechanism is single-threaded! All callback functions will be placed in the task queue, and executed after the main function has finished running!
Please remember that JavaScript's operating mechanism is single-threaded! All callback functions will be placed in the task queue, and executed after the main function has finished running!
Please remember that JavaScript's operating mechanism is single-threaded! All callback functions will be placed in the task queue, and executed after the main function has finished running!

Tags: Javascript Vue

Posted by Telemachus on Tue, 03 May 2022 10:11:05 +0300