Using PnP.js Create() and Update() function is not working but Read() and Delete() is working

Question

Using the below SPFx PnP.js code I am doing the CRUD operation in SharePoint online list:

private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}

UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

In the above code AddItem() and UpdateItem() are not working but reading list items and deleting list item are working. I mean I am not able to add new record to the list and update also not getting any errors, getting the successful alert message but it is not adding or updating the items. Any issue with the AddItem() and updateItem() function code....any help will be much appreciated.

Updated

I am not getting any error though it add and update function is not working, by the way I am global administrator.

While clicking on the add button getting the successful alert message but it is not adding, screenshot attached:

Complete code reference:

 import pnp from 'sp-pnp-js';
//import { default as pnp, ItemAddResult } from "sp-pnp-js";
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PnPspCrud.module.scss';
import * as strings from 'pnPspCrudStrings';
import { IPnPspCrudWebPartProps } from './IPnPspCrudWebPartProps';

        export interface ISPList {
      ID: string;
      EmployeeName: string;
      Experience: string;
      Location: string;
    } 

export default class PnPspCrudWebPart extends BaseClientSideWebPart<IPnPspCrudWebPartProps> {


private AddEventListeners() : void{
 document.getElementById('AddItem').addEventListener('click',()=>this.AddItem());
 document.getElementById('UpdateItem').addEventListener('click',()=>this.UpdateItem());
 document.getElementById('DeleteItem').addEventListener('click',()=>this.DeleteItem());
}

 private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

private _renderList(items: ISPList[]): void {
  let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
  html += `<th>EmployeeId</th><th>EmployeeName</th><th>Experience</th><th>Location</th>`;
  items.forEach((item: ISPList) => {
    html += `
         <tr>
        <td>${item.ID}</td>
        <td>${item.EmployeeName}</td>
        <td>${item.Experience}</td>
        <td>${item.Location}</td>
        </tr>
        `; 
  });
  html += `</table>`;
  const listContainer: Element = this.domElement.querySelector('#spGetListItems');
  listContainer.innerHTML = html;
}



  public render(): void {
    this.domElement.innerHTML = `

      <div class="parentContainer" style="background-color: lightgrey">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
      <span class="ms-font-xl ms-fontColor-white" style="font-size:28px">Welcome to SharePoint Framework Development using PnP JS Library</span>
      <p class="ms-font-l ms-fontColor-white" style="text-align: left">Demo : SharePoint List CRUD using PnP JS and SPFx</p>
   </div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Employee Details</div>

</div>
<div style="background-color: lightgrey" >
   <form >
      <br>
      <div data-role="header">
         <h3>Add SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeName"  placeholder="EmployeeName"    />
            <input id="Experience"  placeholder="Experience"  />
            <input id="Location"  placeholder="Location"    />
         </div>
         <div></br></div>
         <div >
            <button id="AddItem"  type="submit" >Add</button>
         </div>
      </div>
      <div data-role="header">
         <h3>Update/Delete SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeId"   placeholder="EmployeeId"  />
         </div>
         <div></br></div>
         <div >
            <button id="UpdateItem" type="submit" >Update</button>
            <button id="DeleteItem"  type="submit" >Delete</button>
         </div>
      </div>
   </form>
</div>
<br>
<div style="background-color: lightgrey" id="spGetListItems" />
</div>

   `;
this.getListData();
this.AddEventListeners();
  }


AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}
/* 
AddItem()
{  

  pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
    EmployeeName : document.getElementById('EmployeeName')["value"],
    Experience : document.getElementById('Experience')["value"],
    Location:document.getElementById('Location')["value"]
   })
.then(addResponse => {
    alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");
})
.catch(addError => alert("An error has occurred:" + JSON.stringify(addError)));

}
*/

/*
private AddItem():void
{
     pnp.sp.web.lists.getByTitle("EmployeeList").items.add({
      EmployeeName : document.getElementById('EmployeeName')["value"],
      Experience : document.getElementById('Experience')["value"],
      Location: document.getElementById('Location')["value"]
  })
  .then((iar: ItemAddResult) => {
      console.log(iar);
  })
  .catch((error:any) => {
      console.log("Error: ", error);
  });

}
*/


UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Note:

I am referring this link where complete code is available.

https://www.sharepoint-journey.com/SharePoint-Framework-Development-Create-List-CRUD-WebPart-PnPJS.html

Answer 1

Try to use catch in the code snippet to get the exception in the code snippet like below:

import { default as pnp, ItemAddResult } from "sp-pnp-js";
private PnPAddItem():void
{
     pnp.sp.web.lists.getByTitle("Jerry").items.add({
      EmployeeName : document.getElementById('EmployeeName')["value"],
      Experience : document.getElementById('Experience')["value"],
      Location: document.getElementById('Location')["value"]
  })
  .then((iar: ItemAddResult) => {
      console.log(iar);
  })
  .catch((error:any) => {
      console.log("Error: ", error);
  });

}

Try to trace the error in catch for more detailed information and find the cause.

Update: Try to check the detailed response data using Developer Tool to trace the issue: