3

I am trying to fetch data from SharePoint in spfx web part with No javascript framework. I am able to access the list and getting the response object but not able to access the value from the response object.

I am getting error as Property 'value' does not exist on type 'IListItem[]

below is my code:

private _GetListItemsNF(): void {
    var url = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('testList')/items?$select=Title,Id";
    this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
        .then((response: Response): Promise < IListItem[] > => {
            return response.json();
        })
        .then((response) => {
            alert(response.value);
        }, (error: any) => {
            alert(error);
        });
}

Refer below screenshot -

enter image description here

However when I debug the code I am able to access the value as response.value in debug console. Refer screenshot below for the same :

enter image description here

Can anybody please suggest me on this. Is there anything wrong with the code that I have written ?

  • Please share your list model where you have defined the list fields – Priyaranjan KS Aug 10 '17 at 14:16
  • @PriyaranjanKS I didn't understand what do you mean by list model. Can you please help me with your last comment. – Rohit Waghela Aug 11 '17 at 6:21
2

You are getting a tslint error because there are no typings defined which say that response which is of type IListItem[] will have a property called value. The best way to solve this is to keep response of type any and then cast the response.value to IListItem[]. Here is your modified code:

private _GetListItemsNF(): void {
    var url = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('testList')/items?$select=Title,Id";
    this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      })
      .then((responseJSON) => {
        const listItems: IListItem[] = responseJSON.value;
        alert(listItems);
      }, (error: any) => {
        alert(error);
      });
  }

Notice I have also changed the type of first response object to SPHttpResponse which will also get rid of the warning. And I have changed the second response object to responseJSON to make it more explicit that it is a json object.

1

1) Response is deprecated and replaced with SPHttpClientResponse.

So, modify your import statement as below:

import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';

2) You need to modify the code as below:

.then((response: { value: IListItem[] }): void => {
        console.log(response.value);

Your full code block would be as below:

private _GetListItemsNF(): void {
    var url = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/
              getbytitle('testList')/items?$select=Title,Id";
    this.context.spHttpClient.get(url,SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse): Promise<{ value: IListItem[] }> => {
        return response.json();
      })
      .then((response: { value: IListItem[] }): void => {
        console.log(response.value);
      }, (error: any): void => {
        console.log(error);
      });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.