Using REST API to get list items from Sharepoint [site content] in React and displaying it in table format

Question

I am trying below code to fetch list items from SharePoint and displaying in table format using REST API up to some point I have wrote the below code. I am unable to figure out how the items will be fetched or how to select columns from list items to display it in table (Suppose I do have Name, Email, Phone and ID on list items):

$.ajax({ 
    url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('App_Name')/items`, 
       type: "GET", 
       headers:{'Accept': 'application/json; odata=verbose;'}, 
       success: function(resultData) {          
         reactHandler.setState({ 
           items: resultData.d.results 
         }); 
       }, 
       error : function(jqXHR, textStatus, errorThrown) { 
       } 
   }); 

For displaying it in table format I am using react-table-component which has rows and columns value in it.

Answer 1

You can use $select in SharePoint REST API to select particular columns from SharePoint list. You need to use internal name of column in REST API. You can get the internal name of your columns by following this article: How to find the Internal name of columns in SharePoint Online?

You can use REST endpoint like:

/_api/Web/Lists/GetByTitle('App_Name')/items?$select=ID,Title,Name,Email,Phone

Answer 2

@Dhanjay Bhardwaj,

If you're developing an SPFx React app (webpart or extension), I suggest you use SPHttpClient or PnPJS to fetch items from SharePoint list.

Compare to $.ajax, the above helper classes execute REST API requests against SharePoint. It adds default headers, manages the digest needed for writes.

You can have a look below tutorials:

• https://www.c-sharpcorner.com/blogs/displaying-data-into-reactbootstraptablenext https://www.c-sharpcorner.com/article/how-to-work-with-list-items-in-spfx-using-rest-api-retrieve-list-data-part-o/