400 error when making POST request (adding item to SharePoint list)

Question

I have a form that contains check boxes and input fields, and hitting the Submit button should ideally add the content values to a SP list.

When I run the debugger I can see that each input (checked items, text inputs, etc) is getting passed into addItemToSPList, but when I open the Network tab I get the following error: "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."

I'm suspecting that something's wrong within my ajax block (perhaps the url), but I'm not 100% sure.

Any thoughts on what's going on?

JS code:

  handleClick() {
    let specialtiesArr = [],
        regionsArr = [],
        commentsArr = [],
        nameArr = [];
    
    $(".check-spec:checked").each(function() {
        specialtiesArr.push($(this).val());
    })

    $(".check-region:checked").each(function() {
        regionsArr.push($(this).val());
    })

    commentsArr.push($('.request-text-area').val());
    nameArr.push($('.submitter-name').val());

    addItemToSPList(specialtiesArr, regionsArr, commentsArr, nameArr)
  }

} // export default class closing bracket

  function addItemToSPList(getSpecialties, getRegions, getComments, getSubmitterName) {
        let specialistRequestsColumns = {
            "__metadata":{"type": "SP.Data.Specialist_x0020_RequestsListItem"},
            "Title": "No Title", // marked it as "not required" in the SP list backend
            "Specialties": { '__metadata': { 'type' : 'Collection(Edm.String)'}, results: getSpecialties }, // multi-select checkboxes
            "Regions": { '__metadata': { 'type' : 'Collection(Edm.String)'}, results: getRegions }, // multi-select checkboxes
            "Comments": getComments, // text box
            "Submitter_x0020_Name": getSubmitterName // input field
        }
    
        let listName = "Specialist%20Requests";
        $.ajax({
            url: `${_globalUrl}/redacted/_api/web/lists/getByTitle('${listName}')/items`, // ?$select=ListItemEntityTypeFullName
            method: "POST", // type
            async: false,
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(specialistRequestsColumns),
            xhrFields: {
                withCredentials: true
            },
            headers: {
                "Accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: data => {
                console.log("upload successful")
                // console.log(data)
            },error: (err) => {
                console.log("Error: " + err);
            }
        })
    }

Tsardines Tsardines · Accepted Answer · 2020-06-25T14:01:40

I got an answer from the nice folks on the SharePoint Stack Exchange.

Basically, the Comments and Submitter_x0020_Name columns were expecting strings, so when I was passing array values it threw the error.

Here's the updated code:

    handleClick() {
        let comments, submitterName;
        let specialtiesArr = [],
            regionsArr = [];
        
        $(".check-spec:checked").each(function() {
            specialtiesArr.push($(this).val());
        })

        $(".check-region:checked").each(function() {
            regionsArr.push($(this).val());
        })

        comments = $('.request-text-area').val();
        submitterName = $('.submitter-name').val();

        addItemToSPList(specialtiesArr, regionsArr, comments, submitterName)
    }

400 error when making POST request (adding item to SharePoint list)

1 Answers