Microsoft 365 – SharePoint online – SPFx – resolving error – Error making HttpClient request in queryable [400] – Microsoft.SharePoint.Client.InvalidClientQueryException – PrimitiveValue or StartObject node was expected – while updating multivalue person field through SPFx component

Hi All,

Greetings for the day!!! Today new issue and solution 🙂

Background / Details

• I am implementing one simple small SPFx component
• SPFx component –
  • Reading / getting some details from users and storing in SharePoint online list
  • In our SharePoint online list we have one multivalued person / user column along with Title and Desc fields
  • On save button click we are submitting details to our SharePoint online list
• Following is the code which we are using to add the item in list

private async SaveData() :Promise<void> {
   
    const web = Web("https://knowledgejunction1.sharepoint.com/sites/demo");

    await web.lists.getByTitle("listtitle").items.add({
      Title:this.state.title,
      ownerId: this.state.owneremail,
      desc: this.state.desc
    }).then(() => {
      //console.log(i);
    });
    alert("Request submitted successfully.");
  }

• While submitting details through SharePoint list we were getting an error

Error / Issue

Uncaught (in promise) Error: Error making HttpClient request in queryable [400] ::> {“odata.error”:{“code”:”-1, Microsoft.SharePoint.Client.InvalidClientQueryException”,”message”:{“lang”:”en-US”,”value”:”A node of type ‘StartArray’ was read from the JSON reader when trying to read a value of a property; however, a ‘PrimitiveValue’ or ‘StartObject’ node was expected.”}}}
at new HttpRequestError (parsers.js:130:1)
at Function. (parsers.js:145:1)
at step (tslib.es6.js:102:1)
at Object.next (tslib.es6.js:83:45)
at fulfilled (tslib.es6.js:73:42)

Solution / Root cause

• This error was occuring because the way we are assigning the values from our multivalued person column to the list column in SaveData() as

ownerId: this.state.owneremail

• Actually we need to assign the value as an object as

ownerId: {results: this.state.owneremail}

• Complete method

private async SaveData() :Promise<void> {
   
    const web = Web("https://knowledgejunction1.sharepoint.com/sites/demo");

    await web.lists.getByTitle("listtitle").items.add({
      Title:this.state.title,
      ownerId: {results: this.state.owneremail},
      desc: this.state.desc
    }).then(() => {
      //console.log(i);
    });
    alert("Request submitted successfully.");
  }

REFERENCES

• Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 1 – https://knowledge-junction.in/2022/04/19/microsoft-365-spfx-react-using-pnp-peoplepicker-part-1/
• Microsoft 365 : SPFx / React – Using PnP PeoplePicker – Part 2 – Saving users selected in PeoplePicker in SharePoint list in single / multi selected “Person” type column – https://knowledge-junction.in/2022/04/25/microsoft-365-spfx-react-using-pnp-peoplepicker-part-2-saving-users-selected-in-peoplepicker-in-sharepoint-list-in-single-multi-selected-person-type-column/

Thanks for reading!!! HAVE a FANTASTIC LEARNING AHEAD 🙂 LIFE IS BEAUTIFUL 🙂