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

What is the rationale behind placing the CSS outside of the React function components, near the imports?

Recently, I encountered an issue with loading CSS inside a React function component using Material UI. Even though I managed to resolve it, I am still intrigued by the underlying reason. Initially, I had something like this setup where I placed both makeSt ...

Tips for reusing a Jest mock for react-router's useHistory

When testing my code, I set up a mock for the useHistory hook from react-router-dom like this: jest.mock("react-router-dom", () => ({ useHistory: () => ({ length: 13, push: jest.fn(), block: jest.fn(), createHref: jest.fn(), go ...

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

Is it possible for changes made to an object in a child component to be reflected in the parent component

When passing an object to the child component using , how can we ensure that changes made to a specific property in the object within the child component are visible in the parent component? In my understanding, changes would not be reflected if we were p ...

Angular removing every query string parameters

Linked to but distinct from: How to maintain query string parameters in URL when accessing a route of an Angular 2 app? I am facing an issue with my basic Angular application where adding a query parameter results in its removal, both from the browser&apo ...

Adjust dropdown options based on cursor placement within textarea

I have a textarea and a dropdown. Whenever a user selects an option from the dropdown menu, it should be inserted into the text area. However, I am facing a bug where the selected value is being inserted at the end of the text instead of at the current cur ...

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

When making a GET request with Systemjs, the extension .js is not being added to the URL. These are my TypeScript Classes customer.ts import {Address} from "./Address"; export class Customer { private _customerName: string = ""; public Customer ...

Using kotlinx.serialization to deserialize a JSON array into a sealed class

Stored as nested JSON arrays, my data is in rich text format. The plaintext of the string and annotations describing the formatting are stored in text tokens. At decode time, I aim to map the specific structure of these nested JSON arrays to a rich Kotlin ...

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

I seem to be struggling with understanding how TSyringe handles classes with dependencies. To illustrate my issue, I have created a simple example. In my index.tsx file, following the documentation, I import reflect-metadata. When injecting a singleton cl ...

Documentation for npm package that has been published

Recently, I created my very first npm package using TypeScript. However, when I tried to use this package in another project, I realized that I wasn't getting the expected code completion and it was challenging to work with it without proper support. ...

What is the best approach to breaking down attributes upon import according to the theme?

Hey there! Here's the thing - I have this file called <code>colors.ts:

export const black = '#0C0C0C'; export const blue = '#22618E'; Whenever I need to use a color, I import it like so: import {black} from 'Shared& ...

What kind of null/undefined is being assumed?

system details: Visual Studio Code Version: 1.47.3 Typescript Version: 4.0.0-dev.20200727 tsconfig.js: "strict": true, code example: let x = null; // x is any type let y = x; // x is null type(why? x is any type on top), y is null type x = 1; / ...

Outputting double columns with Typescript Sequelize associations

I am currently in the process of constructing table models using sequelize along with typescript. Here is an example of one of my models: 'use strict'; import { Model, InferAttributes, InferCreationAttributes, CreationOptional } from 'seque ...

Inquiry about how TypeScript handles object property references when passed into functions

As a newcomer to TypeScript, I am exploring the creation of a range slider with dual handles using D3.js. I have developed a simple class for managing the slider objects: export class VerticalRangeSlider{ private sliderContainer: d3.Selection<SVGG ...

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

How to programmatically close an Angular 5 Modal

In my current project, I am working with Angular 5. One of the functionalities I have implemented is a modal window. The HTML structure for this modal looks like this: <div class="add-popup modal fade" #noteModal id="noteModal" tabindex="-1" role="dia ...

Hold off on making any promises regarding Angular 2

Let me start by stating that I have gone through many responses and I am aware that blocking a thread while waiting for a response is not ideal. However, the issue I am facing is quite complex and not as straightforward to resolve. In my advanced project, ...

Ways to update the value of an object in typescript

When working with an array of objects, I encountered an issue while trying to change the object value. The error message "Type 'string | boolean' is not assignable to type 'never'. Type 'string' is not assignable to type &apos ...

Issue encountered while setting up controls and AbstractControls in form development

Here is a snippet of code showing how I create and manipulate a form in Angular: this.myForm = new FormGroup({ points: new FormArray([ new FormGroup({ date: this.date, startTime: new FormControl(null, Val ...