如何将 API 响应数据拉入 HTML 表

Question

i'm trying to pull data from a response i'm getting on a Google Workspace API request to a HTML table, the response i'm getting is an array that is being store at an HTML element every time I made the request. Here's my code for it:

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

and then, my code which is not working to populate my html table with it:

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

what am I doing wrong?

Answer 1

The buildTable function requires an array as the argument to the function whereas you are passing the entire myTable element as the argument on the second line in your script tag. That is why the for loop never gets executed since data.length would be undefined. Pass the array of data from the API to the function and you should be good to go.