get sharepoint list items using rest api

By: Unknown on 08:17

Share it Please

Tweet

1.Create a Custom List Name as "Emp" and Create a below Column Name

  FirstName - Single Line Text
  LastName-Single Line Text
  Location-Single Line Text

2.Create one Content Editor WebPart and  paste the below code

<script type="text/javascript" src="https://Site Collection Url/sites/TestSite/Style Library/Samples/jquery-1.8.0.min.js"></script>

<style>

<style type="text/css">
.EmpTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.EmpTable th { background-color:#BDB76B;color:white;width:32%; }
.EmpTable td, .EmpTable th { padding:5px;border:0; }
.EmpTable td { border-bottom:1px dotted #BDB76B; }

</style>


<script type="text/javascript">

$(document).ready(function() {
    

$.getJSON("https://Site Collection Url/sites/TestSite/_vti_bin/ListData.svc/Emp?$select=Id,Title,FirstName,LastName",function(data) {     

           
            var datarows = [];       
  

$.each(data.d.results, function(i,result) {

 var Title = result.Title;
 var  Id = result.Id;
 var  FirstName = result.FirstName;
 var  LastName = result.LastName;

datarows.push({Id: Id, Title: Title,FirstName: FirstName,LastName: LastName}); 


                                  
               
});

   var sFullHtml = '';
   
     sFullHtml += '<table id="TblEmpInfo" class="EmpTable" >';
sFullHtml += ' <tr >';
sFullHtml += ' <th>First Name</th>';
sFullHtml += ' <th>Last Name</th>';
sFullHtml += ' <th>Id</th>';
sFullHtml += ' </tr>';

   for (var arrayIndex in datarows) {      
       var FirstName=datarows[arrayIndex].FirstName;
       var LastName=datarows[arrayIndex].LastName;
        var Id=datarows[arrayIndex].Id;
        
sFullHtml += '<tr>';
    sFullHtml += '<td align="left" valign="top">'+ FirstName +'</td>';
sFullHtml += '<td align="left" valign="top">'+ LastName +'</td>';
sFullHtml += '<td align="left" valign="top">'+ Id +'</td>';
sFullHtml += '</tr>';

         }  
 
 sFullHtml += '</table>';

  $(".EmpInfo").html(sFullHtml);

});
});




</script>

<div class="EmpInfo" style="margin-top:10px;">

</div>


output:-