LitElement – ForEach array in template

To Foreach the array FileLists.We fetch the API and set the state array to FileLists.We using async Promise Function to fetch the API and update the Array.

  @property() FileLists: Promise<any[]> = [];

async getList(): Promise<any[]> {
    this.loading = true;
    return await axios.get(`/app/site/hosting/scriptlet.nl?script=customscript_file_upload_endpoint&deploy=1&aaa_action=list-files&aaa_uuid=${transactionUUID}`)
      .then((response) => {
        this.loading = false;
        let test = response.data;

        return this.FileLists = test.files === undefined ? [] : test.files;

      })
      .catch((e) => {

        console.log(e)
      })
  }

protected render() {
    console.log('render', this.FileLists);
    console.log('Department list', this.DeptLists);
    return html`
      <slot></slot>
      <h1>Files</h1>
      <div class='overlay__inner ${this.loading === true ? '' : 'hidden'}'>
      <div class="overlay__content"><span class="spinner"></span></div>
      </div>
      <table>
            <tr>
              <th>Date Created</th>
              <th>File Name</th>
              <th>Description</th>
              <th>Size (MB)</th>
              <th>Author</th>
              <th>Department</th>
            </tr>
            ${this.FileLists.length ? this.FileLists.map((element, i) => {
      return html`
            <tr class='${this.count === i ? 'Active' : ''}'>
            <td>${element.created}</td>
              <td><a target='_blank' href='${element.path}' style="text-decoration: none;color: #000;">${element.name}</a></td>
              <td>
                <p class='description-p ${this.count === i ? 'hidden' : ''}'>${element.description}</p>
                <textarea id="description${i}" @input="${(e) => this.handlechange(e, i, element)}" class='description-t ${this.count === i ? '' : 'hidden'}' name="description" value='${element.description}'  rows="3" cols="50""></textarea>
                <p class='${this.required === true && this.count === i ? '' : 'hidden'} 'style="color: crimson;">Description is Required</p>
              </td>
              <td>${this.ConvertMB(element.size)}</td>
              <td>${element.uploadedby.name}</td>
              <td>
                <p class='${this.count === i ? 'hidden' : ''}'>${element.department.name}<p>
                <select name = 'Departments' @change="${(e) => this.modifyDept(e, i, element)}" class='${this.count === i ? '' : 'hidden'}'>
                  ${this.DeptLists.length ? this.DeptLists.map((valueArray, j) => {
        // console.log('Comparison', element.department.id === valueArray.internalid);
        if (element.department.id === valueArray.internalid) {
          return html`<option value='${valueArray.internalid}' selected>${valueArray.name}</option>`
        } else {
          return html`<option value='${valueArray.internalid}'>${valueArray.name}</option>`
        }
      }) : ''}
                </select>
                <p class='${this.required === true && this.count === i ? '' : 'hidden'} 'style="color: crimson;">Department is Required</p>
              </td>
              </tr>
            `
    }) : []} 
      </table>
  `
  }