SOLVED

How to iterate my Promise<any[]>

Contributor

I am querying a list using PNPJS and loading that into a property of my class. The property is called 

 

private emps;

 

When I console.log this it shows that it is loaded with data so that is working great.

 

Now I want to iterate through the array and change the contents of a <table>, but every way I try to iterate the property I get an error that this.emps is of 'undefined'. How could it be undefined with the this? In other versions of my code I have console.log(this.emps) and it returned a Promise of array that was loaded with the data, so I am sure the data is there. This seems like a simple thing and yet I can't find anything the works. Please help.

 

I have used:

this.emps.forEach(e => { });

 

this.emps.forEach(function(){ });

 

for (let e in this.emps) { };

 

 

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import {spfrom '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/odata";
import { Web } from "@pnp/sp/webs";

import { TextField } from 'office-ui-fabric-react/lib/TextField';


import styles from './EmployeeLookupWebPart.module.scss';
import * as strings from 'EmployeeLookupWebPartStrings';
import { Items } from '@pnp/sp/items';

export interface IEmployeeLookupWebPartProps {
  descriptionstring;
}

export default class EmployeeLookupWebPart extends BaseClientSideWebPart <IEmployeeLookupWebPartProps> {

  private emps;

  protected async onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        sp: {
          headers: {
            Accept: "application/json;odata=verbose",
          },
          baseUrl: "https://cityofnampaid.sharepoint.com/sites/city"
        },
      });
    });
  }

  private _textFieldChanged(): void {
    var txt = document.getElementById('employee-search-filter')["value"];
    console.log(txt);

    for (let e in this.emps) {
      console.log(e);
    }
  }

  public render(): void {

    this.emps = web.configure({
      mode: 'cors',
      credentials: 'include'
    }).lists.getByTitle("Directory").items.getAll().then(items => {
      console.log(items);
      return items;
    });

    this.domElement.innerHTML = `
      <div class="${ styles.employeeLookup }">
        <div class="${ styles.container }">
          <h1>Employee Lookup</h1>
          <div style="margin-bottom: 24px;">
            <input id="employee-search-filter" type="text" placeholder="Search filter" style="padding: 4px;" />
          </div>
          <table>
            <thead>
              <tr>
                <th>Employee</th>
                <th>Job Title</th>
                <th>Department</th>
                <th>Office</th>
              </tr>
            </thead>
            <tbody id="employee-search-results">
              <tr>
                <td>Marion Smith</td>
                <td>Programmer Analyst</td>
                <td>Information Technoloy</td>
                <td>(208) 468-4498</td>
              </tr>
              <tr>
                <td>Marion Smith</td>
                <td>Programmer Analyst</td>
                <td>Information Technoloy</td>
                <td>(208) 468-4498</td>
              </tr>
              <tr>
                <td>Marion Smith</td>
                <td>Programmer Analyst</td>
                <td>Information Technoloy</td>
                <td>(208) 468-4498</td>
              </tr>
              <tr>
                <td>Marion Smith</td>
                <td>Programmer Analyst</td>
                <td>Information Technoloy</td>
                <td>(208) 468-4498</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>`;

      let changeEvent = document.getElementById('employee-search-filter');
      changeEvent.addEventListener("keyup", (eEvent=> this._textFieldChanged());

  }

  protected get dataVersion(): Version {
  return Version.parse('1.0');
}

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', {
                label: strings.DescriptionFieldLabel
              })
            ]
          }
        ]
      }
    ]
  };
}
}
1 Reply
best response confirmed by smithme (Contributor)
Solution

I decided to use the following:

 

  private emps = new Array();
 
    web.configure({
      mode: 'cors',
      credentials: 'include'
    }).lists.getByTitle("Directory").items.getAll().then(items => {
      console.log(items);
      items.forEach(element => this.emps.push(element));
    });
 
    this.emps.forEach(element => {
      console.log(element);
    });