Sometimes I need to create a new item with an attachment to a list in Sharepoint by using REST API.

What I used to do to achieve this task was to first create the item in the Sharepoint list by using the code below:

    url: `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/GetByTitle('${listName}')/items`,
    type: "POST",
    contentType: "application/json;odata=verbose",
    data: JSON.stringify(item),
    headers: {
        "Accept": "application/json;odata=verbose",
        "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value,
}).then( (data) => {
      const id = data.d.Id;
      // function to upload attachment here

This works just fine. However, I am trying to drop using jquery and move to ES6 features like fetch. With fetch I am able to create a Sharepoint List Item with the code below, but I don't get the posted data in the callback, and therefore I am missing the newly created item Id that I need in order to upload the attachment

const url = `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/GetByTitle('${resourceList}')/items`;

const options = {
    method: "POST",
    credentials: "same-origin",
    headers: { 
        "Accept": "application/json;odata=verbose",
        "Content-Type": "application/json;odata=verbose",
        "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value
    body: JSON.stringify(item)

fetch(url, options)
    .then( (data) => {
        const id = data.d.Id;
        // not working, how can I get the newly created item Id in this callback?

Does anyone know how can i achieve the same result I used to get with jQuery ajax, by using javascript fetch?


You can use it something as below:

fetch(url, options)
    .then((data) => {
        data.json().then(value => {
            const id = value.d.Id;      
  • It's working, thank you! Just a question: I tested your solution also in the case I am updating (MERGE) an existing list item. In such case it is not working, and I get the error "Uncaught (in promise) SyntaxError: Unexpected end of JSON input". I understand that if I am updating an item I already know the Id, so it is not really needed, but I am still curious why such an error appears. Do you know why? Aug 12 '20 at 11:28
  • You need to check the data object in that scenario. In some case, it doesn't give the JSON response, sometimes it just gives a response code etc. You can check in the console.log Aug 12 '20 at 11:32
  • That is what i tried to do. The data I get back tells me the status of the calls, but when I apply to it in a merge call the .json() method the code breaks Aug 12 '20 at 12:44
  • ok, so in that case, you can check the Chrome/Edge network tab see what the actual raw response is and change the code accordingly. Sometimes, you don't get the response obj back, just a status code that the request was success etc, so a check like if data.ok then check if data contains obj etc. Aug 12 '20 at 14:08
  • So, after further inspection, the response object I get when I create the element has a status 201 (Created), while the one I get after updating an element has a status 204 (No content). This is the only difference. Do you know how can I get in both cases a status 201? Aug 12 '20 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.