Forum Discussion

chiranthakaJ's avatar
chiranthakaJ
Copper Contributor
May 28, 2023

Unable to List All SharePoint Online Lists Using SharePoint SPFX Framework

Hi All,

 

I'm new to SharePoint SPFX development. As I am new to SharePoint SPFx, I was trying the below Microsoft Official Tutorial https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint .

 

I successfully completed Part 01 of the tutorial series, https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part 

 

When I'm following Part 02 I got stuck at the below 2 methods

01

 

 

 

 

   private _renderListAsync(): void {
    this._getListData()
      .then((response) => {
        this._renderList(response.value);
      })
      .catch(() => {});
  }

 

 

 

 

 

Spoiler
The error is in line 4 (response.value), which is 'Argument of type 'ISPLists[]' is not assignable to parameter of type 'ISPList[]'.
Type 'ISPLists' is missing the following properties from type 'ISPList': Title, Idts(2345)'

Also in the same method line 6 (.catch(() => {});), which is 'Unexpected empty arrow function.eslinthttps://typescript-eslint.io/rules/no-empty-function'

02
private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      })
      .catch(() => {}); 
  }


The error is in line 6 (.catch(() => {});), whcich is Unexpected empty arrow function.eslinthttps://typescript-eslint.io/rules/no-empty-function

 

I tried many threads but didn't get an answer.
I'm using SharePoint Online, NodeJs 16.20.0, NPM 8.19.4 without using any front-end framework like React or Angular.

Please refer to the below link for the source code for the solution https://drive.google.com/drive/folders/1RccnNmjIDdqeOvUxg-cnG-byxVwuhNe8?usp=sharing 

Could you please help me to solve this issue?

Best regards,
ChiranthakaJ





 

apis
developer

1 Reply

  • NikolinoDE's avatar
    NikolinoDE
    Platinum Contributor
    May 28, 2023

    chiranthakaJ 

    Here are some steps to fix the problem.

    The code snippet you provided is part of the tutorial, and it calls two methods: _getListData() and _renderList(). The _getListData() method is responsible for fetching the list data from SharePoint, while the _renderList() method handles the rendering of the retrieved data.

    To troubleshoot the issue, you can follow these steps:

    1. Verify that you have completed all the necessary setup steps for the tutorial, including the installation of the SharePoint development environment and the creation of the SharePoint client-side web part project.
    2. Check the implementation of the _getListData() method. Ensure that it is correctly configured to retrieve the list data from SharePoint. You may want to review the Microsoft documentation or the tutorial itself to confirm that the implementation is correct.
    3. Check for any error messages or console logs that might provide clues about the issue. You can use browser developer tools to inspect the network requests and responses to see if there are any errors or unexpected results.
    4. Make sure that you have the necessary permissions to access the SharePoint site and retrieve the list data. If you're using an account with restricted access, it's possible that you may not have the required permissions to fetch the lists.
    5. If you encounter any errors during the execution of the code, try to catch and log those errors using console.log() or display them on the page. This can help you identify the specific issue and narrow down the troubleshooting process.
    6. Consider reaching out to the Microsoft developer community or the official SharePoint development support channels for assistance. They may have specific insights into the tutorial or the SPFx framework that can help you resolve the issue.

    Remember that troubleshooting code-related issues can be complex, especially when working with external APIs and frameworks. It's important to carefully review the tutorial instructions. All steps were developed with the help of AI.

Resources