SharePoint Online, 2013 and 2016 – Display list data in grid using Rest API

Hey Everyone!

Today, in this post i will show you how can we display list data in a grid using Rest API in SharePoint Online, 2013 and 2016.
In this example, i will create a table – Cars – with 4 columns:

– Make
– Model
– Price
– Color

<script src=""></script>
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Cars')/items";
              url: requestUri,
              type: "GET",
              headers: {
                  "accept":"application/json; odata=verbose"
              success: onSuccess,
              error: onError

  function onSuccess(data) {
     var objItems = data.d.results;
     var tableContent = '<table id="tableCars" style="width:100%" border="1 px"><thead><tr><td>Make</td>' + '<td>Model</td>' + '<td>Price</td>' + '<td>Color</td>' + '</tr></thead><tbody>';
     for (var i = 0; i < objItems.length; i++) {
         tableContent += '<tr>';
         tableContent += '<td>' + objItems[i].Make  + '</td>';
         tableContent += '<td>' + objItems[i].Model + '</td>';
         tableContent += '<td>' + objItems[i].Price + '</td>';
         tableContent += '<td>' + objItems[i].Color + '</td>';
         tableContent += '</tr>';
    function onError(error) {

<input type="button" id="btnClick" value="Get All Cars"/>
<div id="CustomerPanel">
   <table id='tableCars' style="width: 100%;" border="1 px">
          <div id="carsGrid" style="width: 100%"></div>

You just need to copy the code and past in a script editor webpart, if you press the button  – Get All Cars –  the result it’s a the following table:


If you are interested to read more, i recommend the following links:


Fábio Carvalho
SharePoint Consultant

Leave a Reply

Your email address will not be published. Required fields are marked *