0

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:

$.ajax({
    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?

Improve this question

1 Answer 1

Reset to default
1

You can use it something as below:

fetch(url, options)
    .then((data) => {
        
    if(data.ok){
        data.json().then(value => {
            const id = value.d.Id;      
        });
    }
});
Improve this answer
6
  • 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? Commented Aug 12, 2020 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 Commented Aug 12, 2020 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 Commented Aug 12, 2020 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. Commented Aug 12, 2020 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? Commented Aug 12, 2020 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.