0

Is anybody familiar with using REST API to update SharePoint lists using jquery? How can I convert this to Axios?

Here is the Code:

 function UpdateListItem() {  
        siteURL = _spPageContextInfo.webAbsoluteUrl;  
        console.log("from top nav - " + siteURL);  
        var apiPath = siteURL + "/_api/lists/getbytitle(''samplelist'')/items/getbyid(1)";  
        $.ajax({  
                url: apiPath,  
                type: "POST",  
                headers: {  
                    Accept: "application/json;odata=verbose"  
                },  
                data: "{__metadata:{'type':'SP.Data.YourlistnameListItem'},Title:”Ur input "  
            }  
            ",  
            async: false, success: function(data) {  
                alert("Item updated successfully");  
            }, eror: function(data) {  
                console.log("An error occurred. Please try again.");  
            }  
        });  
    }  
}
0

The following example code about update list item using jQuery Ajax and Axios post method with REST API for your reference.

jQuery Ajax with SharePoint REST API:

<input id="UpdateItem" type="button" value="Update Item" onclick="UpdateListItem()"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function UpdateListItem(){
    var listName="samplelist";
    var itemId=1;
    var itemType = GetItemTypeForListName(listName);
    var item = {
        "__metadata": { "type": itemType },
        "Title": "test"    
    };    
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items/getbyid("+itemId+")",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "X-HTTP-Method": "MERGE",
            "If-Match": "*"
        },
        success: function (data) {
            console.log('Success');            
        },
        error: function (data) {
            console.log(JSON.stringify(data));
        }
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
} 
</script>

axios post with SharePoint REST API:

<input id="UpdateItem" type="button" value="Update Item" onclick="UpdateListItem()"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript">
function UpdateListItem(){
    var listName="samplelist";
    var itemId=1;

    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName+ "')/items/getbyid("+itemId+")";
    var configAxios = {
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value,
            "X-HTTP-Method": "MERGE",
            "If-Match": "*",
            "Content-Type":"application/json;odata=verbose"
        }   
    };
    var itemType=GetItemTypeForListName(listName);
    var data = {
        "__metadata": {"type": itemType },
        "Title": "MyTest"
    };
    axios.post(url,data,configAxios).then(function(req){         
        console.log('Success');
    }).catch(function(err){
        console.log('error during http call', err);
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>
  • I will give that a try and get back to you. Thanks! – OLA Oct 31 at 3:26

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.