0

I am trying to put a list of s3 objects into a datatable and I'm having trouble getting anything to render. Data looks fine in the console, and is populating upon click. I have to wonder if it's something related to the way S3 sends back data, maybe? I had an issue with presigned urls in an unrelated component.

    const columns = [
      {label: '123', fieldName: 'Key', type:'text'}
     
    ];
    
    export default class SampleAWS extends LightningElement { 
        albumBucketName = '//';
        accessKeyId = '//';
        secretAccessKey = '//';
        region = '//';
        s3;
        dtest;
        columns = columns;
        @track resume = [];
     
    
    
       
    
        awsSdkInitialized = false;
    
        renderedCallback() {
            if (this.awsSdkInitialized) {
                return;
            }
            this.awsSdkInitialized = true;
        
            Promise.all([
                loadScript(this, awsjssdk),
            ])
                .then(() => {
                    this.awsSdkInitialize();
                })
                .catch(error => {
                    console.log(error);
                });
        }
    
        awsSdkInitialize() {
            const AWS = window.AWS;
            console.log(AWS);
            AWS.config.update({
                accessKeyId : this.accessKeyId,
                secretAccessKey : this.secretAccessKey
            });
        
            AWS.config.region = this.region;
        
            this.s3 = new AWS.S3({
                apiVersion: '2006-03-01',
                params: {Bucket: this.albumBucketName}
            });
    
            console.log(this.s3);
        
          }
    
       listS3Objects() {
           this.s3.listObjects(function(err, data) {
                if (err) {
                  console.log("Error", err);
                } else {
                  console.log("Success", data);
                  console.log(data.Contents);
                  const resultData = [];
                  data.Contents.forEach(record => {
                    resultData.push(record);
                  });
                  this.resume = resultData;
                  
                  console.log(this.resume);
                }
               
              });
        }   

 <template>
 <lightning-button label="Retrieve DD214" onclick={listS3Objects}></lightning-button>

<template if:true={resume}>
    <lightning-datatable
    columns={columns}
    key-field="Key"
    data={resume}
 >
</lightning-datatable>
</template>

</template>

1 Answer 1

1

Okay, I think maybe what I was doing was assigning the returned promise object to a property, rather than waiting for the resolve.

Here's an updated approach that worked if anyone is interested.

   async getObjectsFromS3() {
    const s4 = new AWS.S3({
        apiVersion: '2006-03-01',
        params: {Bucket: '//'}
    });
    return new Promise((resolve, reject) => {
        s4.listObjects((err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
}

async handleGetObjectsFromS3() {
  try {
      const data = await this.getObjectsFromS3();
      if (data) {
          console.log(data);
          console.log(data.Contents);
          this.resume = data.Contents;
          console.log(JSON.stringify(this.resume));
      } else {
          console.log("Error", data);
      }



 } catch (error) {
      console.log("Error", error);
  }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .