数据被以错误的顺序清除

Question

所以这让我整天陷入困境，由于基础设施的变化，我正在构建一个简单的布告栏，我将无法直接访问数据库。幸运的是，应用程序 (ManageEngine ServiceDesk) 有一个 API，可以让我获得我需要的数据。不幸的是，我不能使用 Javascript 来访问 API，因为它们不支持它（我试过）所以我使用的是 python。这方面的 python 工作正常，我能够在那方面获得我需要的所有数据。

问题是我需要对事物的 python 端进行多次调用，因为第一个调用根据我的标准为我提供了工作列表，这工作正常。然后我必须遍历这些作业以进行另一个调用，因为我需要获得每个作业的批准状态。这也很好用，我 console.log() 我需要的信息，它显示得很好。如果我不清除数据字段（midCollectionData 等），该网站可以正常工作，但它会不断加倍。所以我需要清除它们，但是当我这样做时，数据要么根本不显示，要么在第一次运行时不显示，但第二次运行正常。在不请求批准数据的情况下，一切正常（并且当前版本正在运行）但我们希望有一个显示批准状态的图标，我认为问题是我需要使用异步/等待（否则数据会混淆并且没有正确排序，或者返回的批准数据是承诺而不是数据，因为我不是专业人士，这花了我一段时间）。

有谁知道我需要做什么来确保在每次运行开始时清除数据并在每次运行结束时写入数据？任何帮助将不胜感激。另外，如果您有任何提高代码可读性/效率的技巧，那就太好了！

谢谢！

"use strict";

// Set up some empty variables for the list of jobs (as HTML divs) are put in. This needs to be global for all the relevant functons to access.
let midCollectionData = "";
let senCollectionData = "";
let midApprovalData = "";
let senApprovalData = "";

// Same as above, but for the information at the bottom of the screen.
let infoArray = new Array;

// After the page is fully loaded, start all the functions.
$(document).ready(function() {
    startApp();
});

// Start all the functions required to run the page.
function startApp() {
    updateClock();
    getData();
}

// The clock at the top right
function updateClock() {
    var d = new Date(); // Get the date (from the system clock).
    var s = ""; // Var to write a time into in a human readable format.
    s += ((d.getHours() + 11) % 12 + 1) + ":"; // Get just the hours, add 11 and devide all that by 12. Take what is left over and add one. This converts 24hr time to 12hr time. Don't worry I did the math, it checks out.
    s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes(); // Get the minutes and make it always display a leading zero.
    $("#clock").text(s); //bMake the clock element display the time we just formatted.
    $("#date").text(d.toDateString()); // Make the date element display the date we just formatted.
    setTimeout(updateClock, 1000); // do it all again in 1000 milliseconds.
}

// Get the data from helpdesk using fetch()
function getData() {
    fetch('/get-data') // Call the "get-data" function on the serverside python script
        .then(response => response.json()) // Take the full response and store it in an object in a json structure
        .then(data => populate(data))
        .catch(error => console.error(error)); // Log any errors to the console
    setTimeout(getData,10000) // Do it all again in 10 seconds
}

// Get the approval status of each job as this information is not provided when getting info on all jobs.
async function getApproval(jobid) {
    let response = await fetch(`get-approval/${jobid}`);
    let data = await response.json();
    if (data.request.approval_status != null) {
        return new Promise((resolve, reject) => {
            resolve(data.request.approval_status.name);
        })
    }
    else {
        return new Promise((resolve, reject) => {
            resolve("null");
        })
    }
}

// Populate the tables with the data from getData()
async function populate(data) {
    await clearData();
    await $.each(data.requests, async function(i, item) { // Loop through ONLY the requests items of the response data from the server
        let approvalData;
        await getApproval(item.id)
            .then(function (result) {
                approvalData = result;
            });
        makeItem(item.site.name, item.status.name, item.requester.name, item.id, approvalData); // Call makeItem() and pass the site, status, requester, and ID of the current item as arguments
    });
    await updateData(); // After the jobs are written (as html) to the variables, write them into the grid
}

function makeItem(campus, type, name, id, approval) { // Add the job's information to the correct list
    let icon = "";
    switch (approval) {
        case "null":
            icon = "";
            break;
        case "Approved":
            icon = "<span class='material - symbols - outlined'>done</span>";
            break;
        case "Pending Approval":
            icon = "<span class='material - symbols - outlined'>schedule</span>";
            break;
        case "Rejected":
            icon = "<span class='material - symbols - outlined'>close</span>";
            break;
    }
    // Check the site and status and then add to the data to that list as a div in html format
    if (campus == "site1" && type == "Collection") {
        midCollectionData += `<div class='grid-item'>${name} (${id})</div>`;
        return;
    }
    if (campus == "site2" && type == "Collection") {
        senCollectionData += `<div class='grid-item'>${name} (${id}) ${icon}</div>`;
        return;
    }
    if (campus == "site1" && type == "Leadership") {
        midApprovalData += `<div class='grid-item'>${name} (${id})</div>`;
        return;
    }
    if (campus == "site2" && type == "Leadership") {
        senApprovalData += `<div class='grid-item'>${name} (${id}) ${icon}</div>`;
        return;
    }
    console.log(`${name}, ${id}, ${campus}, ${type}, ${approval}, ${icon} slipped through the cracks`); // Log any items to console that don't get sorted and display all infomation so we can investigate
    return;
}

function clearData() { // Clear the data variables to stop double-ups of data
    midCollectionData = "";
    senCollectionData = "";
    midApprovalData = "";
    senApprovalData = "";
}

// Find the correct grid using the div's id and write the html data to it
function updateData() {
    $("div.grid-item").remove(); // Clear the grids to stop double-ups of data
    $("#Middle-Collection").html(midCollectionData);
    $("#Senior-Collection").html(senCollectionData);
    $("#Middle-Approval").html(midApprovalData);
    $("#Senior-Approval").html(senApprovalData);
}

我已经尝试将 clearData() 函数移动到不同的地方并使其异步（虽然我没想到它会真正起作用）但我找不到如何让它以特定顺序运行。