What could be causing my code to fail in retrieving lists from the SharePoint site?

I've been attempting to retrieve lists from a SharePoint site using the provided code, however, the list isn't appearing in the response. Could someone please offer assistance with this issue? I have tried various other solutions, but the problem seems to be specifically related to fetching the list. I have double-checked that the table name and URL of the site are correctly specified in serve.json

import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';

import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';

import { CardView } from './cardView/CardView';

import { QuickView } from './quickView/QuickView';

import { HelloWorldPropertyPane } from './HelloWorldPropertyPane';

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



export interface IHelloWorldAdaptiveCardExtensionProps {

  title: string;

  description: string;

  iconproperty: string;

  targetlist: string;

}



export interface IHelloWorldAdaptiveCardExtensionState {

  description: string;

  items:IListItem[];

}

export interface IListItem{

  EmployeeName:string;

  City:string;

  ContactNumber:string;

  BaseLocation:string;

}



const CARD_VIEW_REGISTRY_ID: string = 'HelloWorld_CARD_VIEW';

export const QUICK_VIEW_REGISTRY_ID: string = 'HelloWorld_QUICK_VIEW';



export default class HelloWorldAdaptiveCardExtension extends BaseAdaptiveCardExtension<

  IHelloWorldAdaptiveCardExtensionProps,

  IHelloWorldAdaptiveCardExtensionState

> {

  private _deferredPropertyPane: HelloWorldPropertyPane | undefined;



  public onInit(): Promise<void> {

    this.state = {

      description:this.properties.description,

      items:[]

    };



    this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());

    this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());



    setTimeout(this.loadSpoData,500);

    return Promise.resolve();

  }



  public get title():string{

    return this.properties.title;

  }



  private loadSpoData=async(): Promise<void>=>{

    if(this.properties.targetlist){

      this.context.spHttpClient.get(

        `${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('MyCompanyEmployeeList')/items`,

        SPHttpClient.configurations.v1)

        .then((response:SPHttpClientResponse)=>{

          response.json().then((responseJSON:any)=>{

            const items:IListItem[]=(<any[]>(responseJSON.value))

            .map<IListItem>((v:{EmployeeName:string;City:string;ContactNumber:string;BaseLocation:string;}): IListItem=>{

              return{

                EmployeeName:v.EmployeeName,

                City: v.City,

                ContactNumber: v.ContactNumber,

                BaseLocation: v.BaseLocation

              };

            });



            this.setState({

              items:items

            });

          });

        });

    }

  }



  protected loadPropertyPaneResources(): Promise<void> {

    return import(

      /* webpackChunkName: 'HelloWorld-property-pane'*/

      './HelloWorldPropertyPane'

    )

      .then(

        (component) => {

          this._deferredPropertyPane = new component.HelloWorldPropertyPane();

        }

      );

  }



  protected renderCard(): string | undefined {

    return CARD_VIEW_REGISTRY_ID;

  }



  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return this._deferredPropertyPane?.getPropertyPaneConfiguration();

  }

}

Answer №1

Here are a couple of recommendations:

  1. Have you checked to ensure that the "targetList" property is correctly populated in the manifest.json file?
  2. Try removing the conditional statement if(this.properties.targetlist){ (and corresponding closing bracket) to see if the list data loads properly afterwards. It seems redundant, especially since the title of the list is already hardcoded later on in GetByTitle('MyCompanyEmployeeList').

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the user's chosen name in place of their actual identity during a chat

I'm facing an issue where I want to show the user's friendly name in a conversation, but it looks like the Message resource only returns the identity string as the message author. I attempted to retrieve the conversation participants, generate a ...

The StreamingTextResponse feature is malfunctioning in the live environment

When I share my code, it's an API route in Next.js. In development mode, everything works as expected. However, in production, the response appears to be static instead of dynamic. It seems like only one part of the data is being sent. I'm puzzl ...

Tips for neatly wrapping a class constructor

Currently, I am experimenting with code to create a more streamlined Angular Dialog initializer. This initializer should be passed a constructor function along with its arguments in a type-safe manner. The current implementation works, but it is challengi ...

Having trouble retrieving data from a JSON file within an Angular application when utilizing Angular services

This JSON file contains information about various moods and music playlists. {mood: [ { "id":"1", "text": "Annoyed", "cols": 1, "rows": 2, "color": "lightgree ...

How to simulate loadStripe behavior with Cypress stub?

I am struggling to correctly stub out Stripe from my tests CartCheckoutButton.ts import React from 'react' import { loadStripe } from '@stripe/stripe-js' import useCart from '~/state/CartContext' import styles from '. ...

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

I've been struggling to find a solution for this overload issue with no luck so far. My stack includes Typescript, Styled-components, and Material-UI. I am utilizing styled(MUIButton) to extend the default Button from MUI. While my props are being pas ...

Implementing the strictNullCheck flag with msbuild

Can strict null checks be enabled when compiling using msbuild? I see in the documentation that the compiler option is --strictNullChecks, but I couldn't find any specific entry for it on the msbuild config page. Is there a method to activate this f ...

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

I'd like to implement a retry mechanism for an observable chain with a delay of 2 seconds. While researching, I found some solutions using retryWhen. However, it appears that retryWhen is deprecated and I prefer not to use it. The retry with delay s ...

Bidirectional data binding on the table

I am struggling to implement two-way data binding in a table between my .ts and my .html files. I have a structure that adds a new equipment to the array, and I want that new equipment to display on the table within the same screen. I believe it involves ...

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Recently, I implemented a fetch feature using TypeScript for my NextJS 13 project. As I am still getting familiar with TypeScript, I wanted to double-check if my approach is correct and if there are any potential oversights. Here is the code snippet from ...

Transform the JSON object into a TypeScript array

Currently working on a project that requires converting a JSON object into a TypeScript array. The structure of the JSON is as follows: { "uiMessages" : { "ui.downtime.search.title" : "Search Message", "ui.user.editroles.sodviolation.entries" : ...

The element 'Component' is not eligible to be utilized as a JSX component (typed layout)

I encountered a type error while working with the following code snippet: {getLayout(<Component {...pageProps} />)} The error message states that 'Component' cannot be used as a JSX component. This is because its element type 'Compo ...

Error message in VsCode plugin stating that property 'X' is not found on type '{}' within a Vue 3 template

Currently, I am in the process of setting up my vue-cli project that utilizes the composition API with <script setup> to fully integrate TypeScript. Each time I try to use variables within template tags, VSCode flags errors. I have already installed ...

Is it feasible to append an element to the result of a function that returns an array?

Is it possible to push something to an array returned by a function, but not directly? Instead, I want to push it back into the function itself. hierar() { return [{ h: 1 }, { h: 2, hh: [{ u: 2.1 }, { u: 2.2 }] }, { h: 3, hh: [{ u: 4 }, { U: 5 } ...

Error: Type '() => () => Promise<void>' is not compatible with type 'EffectCallback'

Here is the code that I'm currently working with: useEffect(() => { document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)'; window.$crisp.push(['do', 'ch ...

Can a library be developed that works with both Java and JavaScript/TypeScript?

I specialize in Angular development. Our front- and backend both contain specialized calculation methods that work like magic. Although the classes are the same, any bugs found in the calculations have to be fixed separately in two different projects. Is ...

Ways to incorporate extension methods through a "barrel file" - how to do it?

When attempting to define extension methods in separate files and import them through a barrel file, the methods don't seem to be added to the prototype. The following approach works: import './rxjs-extensions/my-observable-extension-1'; i ...

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

What is the suggested method for supplying optional parameters to a callback as outlined in the Typescript documentation?

While going through the do's and don'ts section of the Typescript documentation, I came across a guideline regarding passing optional parameters to a callback function. The example provided was: /* WRONG */ interface Fetcher { getObject(done: ( ...

JSX is restricted in files using the '.tsx' extension according to eslint rules (react/jsx-filename-extension)

When working in a .tsx file, why does eslint flag the following issue: The use of JSX is not permitted in files with the extension '.tsx' (eslint react/jsx-filename-extension) What steps can I take to adjust the eslint configuration and addres ...