Blog Archives

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

http://span%20style=

$(function(){
    $("#btnClick").click(function(){
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Cars')/items";
           $.ajax({
              url: requestUri,
              type: "GET",
              headers: {
                  "accept":"application/json; odata=verbose"
              },
              success: onSuccess,
              error: onError
});

  function onSuccess(data) {
     var objItems = data.d.results;
     var tableContent = '' + '' + '' + '' + '';
  
     for (var i = 0; i '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
         tableContent += '';
 }
   $('#carsGrid').append(tableContent);
   }
    function onError(error) {
        alert('Error');
   }
  });
});


<input type="button" id="btnClick" value="Get All Cars"/>
CustomerPanel">
MakeModelPriceColor
' + objItems[i].Make + '' + objItems[i].Model + '' + objItems[i].Price + '' + objItems[i].Color + '
tableCars' style="width: 100%;" border="1 px">
carsGrid" style="width: 100%">
</td> </tr> </table> </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:

Mark Model Price Color
Mercedes A180 22.000.00€ Red
Jaguar X-Type 72.000.00€ Green
Fiat 500 20.000.00€ Blue
Bmw 320d 32.000.00€ Black

If you are interested to read more, i recommend the following links:
https://msdn.microsoft.com/en-us/library/office/jj860569.aspx
https://msdn.microsoft.com/en-us/library/office/jj164022.aspx

Thanks

Fábio Carvalho
SharePoint Consultant
|create|it|