How implement REST queries in SharePoint?

Question

I'm a dev who tries to learn SharePoint but find it quite hard to navigate around.

I want to create a list that gets list item from an external list by their content type. I have made a REST query that I want to try it:

/_api/web/lists/getbytitle('MyList')/items?$select=ContentType/Name&$expand=ContentType

But how do I IMPLEMENT this code and try it? Create a list, and tweak it with this code? Make a web part? Or something else? I'm confused

Answer 1

Simple GET Operation:

jQuery.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + {listname} + "')/items?$select=ID,Title",
        type: "GET",
        contentType: "application/json",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: function (response, status, headers, config) {
            console.log(response.value);                
        },
        error: function (response, status, headers, config) {
            console.log('Error: ' + response);
        }
    })

Important Note:

1. __metadata: { "type": "SP.Data.TestListItem" }
2. __metadata: {'type': 'SP.Data.{InternalName of your list}ListItem'}
3. You can also get list/library Name by making this call /_api/Web/Lists/getbytitle('{listname}')/ListItemEntityTypeFullName

Simple CREATE Operation:

data = { };
data.__metadata: { 'type': 'SP.Data.TestListItem' }
data.Title: 'Some title';
data.Column1:'colvalue';

    jQuery.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + {listname} + "')/items",
        type: "POST",
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "content-Type": "application/json;odata=verbose"
        },
        data: JSON.stringify(data),
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            alert(JSON.stringify(error));
        }
    });

Simple Update Operation:

data = { };
data.__metadata: { 'type': 'SP.Data.TestListItem' }
data.Title: 'Some title - update';
data.Column1:'colvalue - update';

  jQuery.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + {listname} + "')/items({item id to update})",
        type: "PATCH",
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "content-Type": "application/json;odata=verbose",
            "X-Http-Method": "PATCH",
            "If-Match": oldItem.__metadata.etag
        },
        data: JSON.stringify(newItem),
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            alert(JSON.stringify(error));
        }
      });

Simple Delete Operation:

jQuery.ajax({  
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + {listname} + "')/items({item id to delete})",  
    type: "POST",  
    async: false,  
    headers: {  
        "Accept": "application/json;odata=verbose",  
        "X-Http-Method": "DELETE",  
        "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
        "If-Match": "*"  
    },  
    success: function(data) {  
        alert('deleted');  
    },  
    error: function(data) {  
        alert('Failed to delete');  
    }  
});