filter a value from a list via PNP/JS and then store it in a locale variable within SPFx SharePoint Online

Question

I have a lack of understanding of retrieving a value from a list. I want to use it to build a counter and then increment the counter locally after a button is pressed. After the incrementation I want to write it back to the counter list.

The value is retrieved by using PNP/JS. This works so far. Everytime I want to write it to local variable I get the error message "undefined". I don't know where the problem is coming from and where I need to defined the type.

Here are my code steps so far:

1. First I filter the element with the type ICounterItem:

My defined Item and the retrieving of the specific counter Value. The number should be 2

export interface ICounterItem{
    Id: number,
    NewId: number
}

    public ReadCounterValue = async (listTitle: string): Promise<ICounterItem> =>{

     try{
      const response: ICounterItem= await this._sp.web.lists
      .getByTitle(listTitle)
      .items.top(1).filter("Title eq 'TO'")
      .select("Id","NewId")()
      return response;
     }

   catch(e){
      console.log(e);
     }
   }

2. Then I want to save the retrieved value in my state (counterID) variable:

   export interface IListItemsState{
     counterItem: ICounterItem;
     counterID: number
     }
   

3. I wrote the constructor and intialize the counterID in the next step with 0

    constructor(props:ISpTestingfilesystemProps, state: IListItemsState){
     super(props);
     this.state={
        counterID:0
     }
     this._spDataProvider= new SharePointDataProvider();
     this._sp= getSP();
   }
   

Then I try to set the value to counterID. The Counter ID should be 2 (See the screenshot)

 private getCounterValue(): void {
this._spDataProvider.ReadCounterValue("Counter").then((item)=>{  
  console.log("Counter Value: "+ JSON.stringify(item))
  console.log(item.NewId);
  this.setState({
       counterID: item.NewId
  })
})
}

When I lock it to the console and try to put it in a div. I get blank and in the console undefined.

I hope you can help me with finding my error.

Best regards

Answer 1

You are receiving array of objects as a result from your SharePoint API call. So, you will have to get the NewId from first element/object of array result.

Try using this:

public ReadCounterValue = async (listTitle: string): Promise<ICounterItem[]> =>{
    try{
        const response: ICounterItem[] = await this._sp.web.lists
        .getByTitle(listTitle)
        .items.top(1).filter("Title eq 'TO'")
        .select("Id","NewId")()
        return response;
    }

    catch(e){
        console.log(e);
    }
}

private getCounterValue(): void {
    this._spDataProvider.ReadCounterValue("Counter").then((items)=>{  
        console.log("Counter Value: "+ JSON.stringify(items))
        console.log(items[0].NewId);
        this.setState({
            counterID: items[0].NewId
        })
    })
}