How to get documents from document library in SharePoint using Rest API

by

In this SharePoint Rest API tutorial, we will discuss how to get documents from the document library sharepoint rest api. We will see here, how to get documents from the SharePoint document library between any given dates using Rest API filter and jQuery.

Here we will also display the documents using an HTML table with jQuery & bootstrap in SharePoint. The code will work in SharePoint Online as well as SharePoint 2013/2016/2019 etc.

get documents from document library SharePoint rest api

First, let us create an Html table to display id, file name & URL of the document using the below code. The code you can add to a web part page using a script editor web part or content editor web part.

If you are using a SharePoint content editor webpart, then you can upload this snippet into site assets, copy the URL, create a SharePoint web part page, Insert Content Editor Webpart & then paste the URL, and click on Save.

Below is the full code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DOC lib</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="https://mytenant.sharepoint.com/sites/Test1/SiteAssets/Scripts/firstjs.js"></script>
</head>

<body>
 <div class="container">
  <h2>document library </h2>
            
  <label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to"><input type="button" value="Apply Filters" onclick="filterFunction()">
  <table class="table table-bordered" id="Doclib">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody id="Doclib1">        
    </tbody>
  </table>
</div>
</body>
</html>

Once you save the page, then the output will appear like below:

get documents from document library sharepoint rest api

Now, we will see how to get documents from the document library using Rest API with Rest API filters in SharePoint. The same code also you can add in the content editor web part or inside a script editor web part.

var dataArraya=[];
var html1="";
var todayDate ="";
var todayDate1 ="";

function formattedDate(date) {
	var today = new Date(date);
	var dd = today.getDate();

	var mm = today.getMonth() + 1;
	var yyyy = today.getFullYear();
	if (dd < 10) {
		dd = '0' + dd;
	}

	if (mm < 10) {
		mm = '0' + mm;
	};
	today = mm + '/' + dd + '/' + yyyy;
	//console.log(today);
	return today;
}

$(document).ready(function(){
todayDate = new Date();
todayDate1 =new Date();
todayDate1.setFullYear( todayDate1.getFullYear() - 2 );

$('#from').val(formattedDate(todayDate1));
$('#to').val(formattedDate(todayDate));

getdoclib();

});

function getdoclib(){
console.log("started");
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/web/lists/getByTitle('Documents')/items?$select=EncodedAbsUrl,*,File/Name&$expand=File";

var requestHeaders = {
    "accept": "application/json;odata=verbose"
}

$.ajax({
    url: requestUri,
    type: 'GET',
    dataType: 'json',
    headers: requestHeaders,
    success: function (data) 
    {        
 if (data.d.results.length > 0) {
    dataArraya = data.d.results;
      console.log(data.d.results);
       $.each(dataArraya, function(i,result) {
          var cretDate = new Date(result.Created);
            cretDate.setHours(0,0,0,0); 
            console.log(cretDate);

if(cretDate >=new Date($("#from").val())  && cretDate <=new Date($("#to").val()) ) {

            var path = result.EncodedAbsUrl;
            var pathId = result.Id;
            var pathfile = result.File.Name;
           
            cretDate.setHours(0,0,0,0); 
            console.log(cretDate);
            html1 +="<tr>";
            html1 +="<td>"+pathId+"</td>";
            html1 +="<td> <a href='"+path+"'>"+pathfile+"</a></td>";
            html1 +="<td> "+path+"</td>";
             html1 +="</tr>";
            $("#Doclib1").append(html1);

        html1="";
}
         });

 }
    },
    error: function ajaxError(response) {
        alert(response.status + ' ' + response.statusText);
    }
});

}

 $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true
        
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true
       
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
      return date;
    }
  } );

function filterFunction(){

var date = new Date();

if ($("#from").val()==""){
  alert("Please select from Date");
  return false;
}else if($("#to").val()==""){
 alert("Please select to Date");
  return false;
}else{

   $("#Doclib1").html("");

 $.each(dataArraya, function(i,result) {

   var cretDate = new Date(result.Created);
            cretDate.setHours(0,0,0,0); 
            console.log(cretDate);
   if(cretDate >=new Date($("#from").val())  && cretDate <=new Date($("#to").val()) ) {
            var path = result.EncodedAbsUrl;
            var pathId = result.Id;
            var pathfile = result.File.Name;
            
            html1 +="<tr>";
            html1 +="<td>"+pathId+"</td>";
            html1 +="<td> <a href='"+path+"'>"+pathfile+"</a></td>";
            html1 +="<td> "+path+"</td>";
             html1 +="</tr>";
            $("#Doclib1").append(html1);

        html1="";
   }
  });
}
}

Once you save the code, you can see the documents will appear like below:

get documents from document library sharepoint rest api

You may like the following SharePoint Rest API tutorials:

Here in this SharePoint tutorial, we learned how to get documents from document library sharepoint rest api with rest api filter with dates in SharePoint Online or SharePoint 2013/2016/2019.

  • Thanks for your helpful article. I have a question though, is a token or auth header not needed to make REST API calls to sharepoint? I have both Sharepoint 2013 and online environments.

    Reply

  • While this is a great solution it does not offer a solution for folders. Folders will produce and Undefined error.

    Reply
    • >