如何将 API 响应数据提取到 HTML 表中

Posted 2023-02-15

【中文标题】如何将 API 响应数据提取到 HTML 表中

【英文标题】：How to pull a API Response data into a HTML Table

【发布时间】：2022-01-21 21:06:42

【问题描述】：

我正在尝试从我收到的对 Google Workspace API 请求的响应中提取数据到 html 表，我收到的响应是一个数组，每次我制作时都存储在 HTML 元素中要求。这是我的代码：

  function execute() 
     return gapi.client.directory.users.list("domain": "mydomain", "maxResults": 450)
            .then(function(response) 
                let t = document.querySelector("#tabela") 
               let data = []    
                console.log(response)
                    response.result.users.forEach((user)=> 
                       
                        data.push(user) 
                        // console.log("Email"+ user.primaryEmail) 
                        // console.log("Email"+ user.lastLoginTime) 
                     SheetDB.write('https://sheetdb.io/api/v1/81m3qdtu47hra',  sheet: 'Sheet1', data:  email: '$user.primaryEmail' , login: '$user.lastLoginTime').then(function(result)
                     console.log(result);
                    , function(error)
                     console.log(error);
    );
                    )
                    console.log(data)
                    let td = data.reduce((acc, user)=>
                      acc += `<tr>$user.lastLoginTime</tr>`
              
                      return acc
                  ,"")
                  t.innerHTML = td
                  console.log("O result é:", td)
                  ,
                  function(err)  console.error("Execute error", err); );`

然后，我的代码无法用它填充我的 html 表：

     <table class="table table-striped">
        <tr  class="bg-info">
            <th>E-mail</th>
            <th>Last Login Time</th>
        <th>Status</th>
        <th>Permissions</th>
        </tr>
    
        <tbody id="myTable">
            
        </tbody>
    </table>
    
    <script>
        var myArray = document.querySelector("#tabela")
        
        buildTable(myArray)
    
    
    
        function buildTable(data)
            var table = document.getElementById('myTable')
    
            for (var i = 0; i < data.length; i++)
                var row = `<tr>
                                <td>$user.primaryEmail</td>
                          </tr>`
                table.innerHTML += row
    
    
            
        

我做错了什么？

【参考方案1】：

buildTable 函数需要一个数组作为函数的参数，而您将整个 myTable 元素作为参数传递给脚本标记的第二行。这就是为什么 for 循环永远不会执行的原因，因为 data.length 将是未定义的。将数据数组从 API 传递给函数，您应该可以开始了。