Fix SPFx Error: An unexpected ‘StartObject’ node was found when reading from the JSON reader. A ‘StartArray’ node was expected.

A few days before, I was working on a SharePoint Framework (SPFx) form customizer extension on a particular SharePoint list. That has different field types such as text, choice, number, date, and multiple-choice. Everything worked fine until I tried to save data in the multiple-choice field, where I faced the following error.

An unexpected 'StartObject' node was found when reading from the JSON reader. 
A 'StartArray' node was expected.

In this article, I will explain how to fix this SPFx error: An unexpected ‘StartObject’ node was found when reading from the JSON reader. A ‘StartArray’ node was expected.

Error: An unexpected ‘StartObject’ node was found when reading from the JSON reader.

I was using the PnPJs library to save the input data to a SharePoint list in the SPFx form customizer extension. We usually send the data for a multi-select choice field like below:

"CommunicationPreferences": { "results": ["Email", "SMS"] }

The function below saves form input to a SharePoint list using PnPJs in SPFx. this.state.communicationPreferences contains the choices that I select in the form, for example: [“Email”, “SMS”, “WhatsApp”].

private _onSave = async (): Promise<void> => {
  try {
    // Prepare data for SharePoint
    const itemData: any = {
      VendorName: this.state.vendorName,
      IndustryCategory: this.state.industryCategory,
      VendorType: this.state.vendorType,
      ContactNumber: this.state.contactNumber,
      Address: this.state.address,
      CommunicationPreferences: {"results":this.state.communicationPreferences},
      VendorRating: this.state.vendorRating
      }

    const addedItem = await this.props.sp.web.lists
      .getByTitle("VendorRegistration")
      .items.add(itemData);
    console.log("Item saved:", addedItem);
    alert("Vendor saved successfully!");

    this.props.onSave();

  } catch (err) {
    console.error("Error saving vendor:", err);
    alert("Error saving vendor. Check console for details.");
  }
};

Solution: A ‘StartArray’ node was expected.

The PnPJs library expects a plain string array, for example: “CommunicationPreferences”: [“Email”, “SMS”], so no need to wrap the array in {results:…} this format. SharePoint received an object instead of an array, which is causing the StartObject vs StartArray mismatch.

The { results: […] } is for the raw REST API [SPHttp client] payloads. PnPjs converts it into a simple array. Using the { results: […] } with PnPjs will double wrap, breaking JSON parsing.

Once I remove the {“results”: …} wrapper, as shown below, the issue is solved, and I’m able to save data to the SharePoint list.

"CommunicationPreferences": this.state.communicationPreferences

Now, the final function is looking like this:

private _onSave = async (): Promise<void> => {
  try {
    // Prepare data for SharePoint
    const itemData: any = {
      VendorName: this.state.vendorName,
      IndustryCategory: this.state.industryCategory,
      VendorType: this.state.vendorType,
      ContactNumber: this.state.contactNumber,
      Address: this.state.address,
      CommunicationPreferences: this.state.communicationPreferences,
      VendorRating: this.state.vendorRating
      }

    const addedItem = await this.props.sp.web.lists
      .getByTitle("VendorRegistration")
      .items.add(itemData);

    console.log("Item saved:", addedItem);
    alert("Vendor saved successfully!");

    this.props.onSave();

  } catch (err) {
    console.error("Error saving vendor:", err);
    alert("Error saving vendor. Check console for details.");
  }
};

The above function will save the entered data to the SharePoint list. Then it displays the entire state that holds the form input data in the console, as shown below, without any errors.

This way, you can solve the issue with the unexpected ‘StartObject’ node found when reading from the JSON reader.

I hope you found this article helpful!, Please verify the APIs you are using, such as SPHttp client, PnP JS, or REST APIs, to submit form data to a SharePoint list or library. It will vary for saving multi-choice fields, lookup fields, etc.

Also, you may like:

• SPFx Error: Couldn’t add this app. Check your network connection and try again
• npm install Failed: ENOENT, EPERM rmdir, EBADF Errors While Creating SPFx Solution
• Restrict SPFx List View Command Set Extension to Specific List/Library
• Delete node_modules from SPFx solution (rimraf)
• [spfx-serve] The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/ in SharePoint Framework