I am querying a list using PNPJS and loading that into a property of my class. The property is called
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.
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 {sp} from '@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 {
description: string;
}
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",
},
},
});
});
}
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", (e: Event) => 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
})
]
}
]
}
]
};
}
}
