How To Work With List Items In SPFx Using REST API - Retrieve List Data - Part One

import {  
    SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions} from '@microsoft/sp-http';  

let currentWebUrl = this.context.pageContext.web.absoluteUrl;  

let requestUrl = currentWebUrl.concat(“/_api/web/Lists/GetByTitle('YourListTitle')/ItemCount”)   
  
this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
    .then((response: SPHttpClientResponse) => {  
        if (response.ok) {  
            response.json().then((responseJSON) => {  
                if (responseJSON!=null && responseJSON.value!=null){  
        let itemCount:number = parseInt(responseJSON.value.toString());  
                }  
            });  
        }  
    });  

Finally, the highlighted line yields you the items count in a list.

Get all Items in a list without using caml query (Get operation is used)

let requestUrl = currentWebUrl.concat(“/_api/web/Lists/GetByTitle('YourListTitle')/items$select=Attachments,AttachmentFiles,*&$expand=AttachmentFiles”)   
  
this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
    .then((response: SPHttpClientResponse) => {  
        if (response.ok) {  
            response.json().then((responseJSON) => {  
                if (responseJSON!=null && responseJSON.value!=null){  
                    let items:any[] = responseJSON.value;  
                }  
            });  
        }  
    });

Finally, the highlighted line gives you the items in a list, but be sure your list doesn’t have more than 5000 items because SharePoint has the limitation that we cannot read more than 5000 items at a time to improve performance. In case you have more than 5000 items in a list you must apply caml query to get the filtered list items. (Note: you have to ensure that caml query also shouldn’t return more than 5000 items) Below is a sample for that also.

Get all Items in a list WITH caml query (Post operation is used)

There are two differences between the request with caml query and without caml query

1. We will be using POST method to use caml query in request body because if CAML query string length exceeds, we cannot directly pass it in ODATA URL since there is some URL length restriction is available hence we are posting our caml query in the request body.
   
2. A slight change in the URL

• • With Query: api/web/Lists/GetByTitle('YourListTitle')/GetItems
  • Without Query: api/web/Lists/GetByTitle('YourListTitle')/items

In SPFx, everything you post in Request Body should have metadata about the body contents, the same as for caml query, as below.

Code Snippet

let camlQueryPayLoad: any = {  
            query: {  
                __metadata: { type: “SP.CamlQuery” },  
                ViewXml: query  
            }  
        };  
  
    let spOpts = {                  
                body: JSON.stringify(camlQueryPayLoad)  
            };  
  
  
this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts)  
    .then((response: SPHttpClientResponse) => {  
        if (response.ok) {  
            response.json().then((responseJSON) => {  
                if (responseJSON!=null && responseJSON.value!=null){  
                    let items:any[] = responseJSON.value;  
                }  
            });  
        }  
    });  

Get list item by itemId (Get operation is used)

let requestUrl = currentWebUrl.concat(“/_api/web/Lists/GetByTitle('YourListTitle')/items(YourItemID)$select=Attachments,AttachmentFiles,*&$expand=AttachmentFiles”)   
  
this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
    .then((response: SPHttpClientResponse) => {  
        if (response.ok) {  
            response.json().then((responseJSON) => {  
            if (responseJSON!=null){  
                let items:any = responseJSON;  
                }  
            });  
        }  
    }); 

If you are working with SPFx for the first time, please make use of browser console for better understanding, console.log (responseJSON)

Look for for the next part of this blog to learn about how to add/update/delete items from a list.