如何确保函数等待API调用解析并注入HTML（Javascript）

Question

我正在编写使用Javascript编写的Qlik Sense扩展。在将值写入要构建的HTML表之前，我需要进行一些API调用。但是我在表中得到的只是“对象承诺”，而不是实际值。我可以在控制台中看到该函数正在返回我想要的值，但是我无法获取HTML表来显示已解析的值。

我尝试了多种方法，例如异步/等待，将其全部包装在promise中，并仅在等待过程中进行编码（不是最佳实践）。

// Javascript


// * Wait function (250ms)

async function f() {                
                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => resolve("done!"), 250)
                });     

                let wait = await promise; 
            }

// * Function to retrieve list of objects

        async function getObjectList(){    // * First API call

                var objectList = [];

                app.getAppObjectList( 'sheet', function(reply){ 
                            $.each(reply.qAppObjectList.qItems, function(key, value) {                                                      
                                    $.each(value.qData.cells, function(k, v) {                                  
                                            app.getObject(v.name).then((result) => {   // * Second API call                                             
                                                var chartTitle = result.layout.title;
                                                objectList.push({value: v.name,    // * Add data to String Array, this is the result I want
                                                                label: chartTitle
                                                                });
                                            });
                                    });                     
                            });

                });

            f().then(() =>{             
                return objectList; // * Return String Array
            });
        };


//HTML

                    table += '<tbody>';
                        for (var r = 0; r < 24; r++) {
                            table += '<tr>';
                            for (var c = 0; c < 1; c++) {   
                                var cellContent = getObjectList().then((data) => {  // * This is where I call the function, but in rendered table it only shows 'object Promise'                                                
                                                        return data;    
                                                });                                                                         

                                table += '<td>';
                                    table += cellContent;                   
                                table += '</td>';
                            }
                            table += '</tr>';
                        }
                    table += '</tbody>';

我得到的是一个充满“对象承诺”的表，我只想呈现实际值。

Current Table

编辑：

我也尝试过How do I return the response from an asynchronous call，但仍然遇到相同的问题。表格内容仍然仅显示为对象Promises。异步/等待方法似乎最有意义，但是我无法使用正确的值来更新表。我不确定从这里去哪里。即使我在函数执行后尝试在数组中访问数组，它在控制台中也显示为未定义。

// New Javascript


// * Wait function (3000ms)

function delay() {
         // `delay` returns a promise
                return new Promise(function(resolve, reject) {
            // Only `delay` is able to resolve or reject the promise
                setTimeout(function() {
                resolve(42); // After 3 seconds, resolve the promise with value 42
                }, 3000);
             });
        }

// * Function to retrieve list of objects

       async function getObjectList(){  
            try{
                var tempObjectList = [];            

                var objectList = await app.getAppObjectList( 'sheet', function(reply){  
                                        $.each(reply.qAppObjectList.qItems, function(key, value) {                                                      
                                                $.each(value.qData.cells, function(k, v) {                                  
                                                        app.getObject(v.name).then((result) => {                                                
                                                            var chartTitle = result.layout.title;
                                                            tempObjectList.push({value: v.name,
                                                                            label: chartTitle
                                                                            });
                                                        });
                                                });                     
                                        });

                            });

                await delay();                              
                return tempObjectList;
            } catch(error){ 
                return null;
            }
        }


//New HTML

                    table += '<tbody>';
                        for (var r = 0; r < 24; r++) {
                            table += '<tr>';
                            for (var c = 0; c < 1; c++) {   
                                var cellContent = (async function(){  // * This is where I call the function, but in rendered table it only shows 'object Promise'                                               let temp = await getObjectList();
                                                        await delay();
                                                        console.log(temp)
                                                        return temp;
                                                })();                                                                        

                                table += '<td>';
                                    table += cellContent;                   
                                table += '</td>';
                            }
                            table += '</tr>';
                        }
                    table += '</tbody>';