locked
Building an HTML table using REST API RRS feed

  • Question

  • Hi,

    Can anyone provide a simple example on how to make a rest call to a SharePoint list and then process the results returned into a HTML table?

    Please note I am not using any apps here. I just want to build a HTML table using a content editor webpart

    Monday, November 10, 2014 1:57 AM

Answers

  • Please refer to the following article.

    How to: Get List Data using REST and JQuery – SharePoint 2013

    <div id="resultsDiv"></div>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    (function ($, undefined) {
    
        SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
            SP.SOD.executeFunc("sp.runtime.js", "SP.ClientContext", function () {
                var context = SP.ClientContext.get_current();
                var queryUrl = "https://aataaq.sharepoint.com/_api/web/lists/getbytitle('Orders')/items"; //change the Url
                $.ajax({
                    url: queryUrl,
                    method: "GET",
                    headers: {
                        "Accept": "application/json; odata=verbose"
                    },
                    success: onQuerySuccess,
                    error: onQueryError
                });
            });
        });
    
        function onQuerySuccess(data) {
            var results = data.d.results;
    
            $("#resultsDiv").append('<table>');
            $("#resultsDiv").append('<tr><td style="font-weight:bold">Order No</td><td style="font-weight:bold">Part No</td><td style="font-weight:bold">Quantity</td></tr>');//add more heading columns as per your requirement.
            $.each(results, function (index, dataRec) {
                $("#resultsDiv").append('<tr>');
                $("#resultsDiv").append('<td>' + dataRec.Title + '</td>'); //Add more columns as per your requirement.
                $("#resultsDiv").append('<td>' + dataRec.Part_x0020_No + '</td>');
                $("#resultsDiv").append('<td>' + dataRec.Order_x0020_Qty + '</td>');
                
                
                $("#resultsDiv").append('</tr>');
    
            });
    
            $("#resultsDiv").append('</table>');
        }
    
        function onQueryError(error) {
            $("#resultsDiv").append(error.statusText)
        }
    })(jQuery);

    Please mark it answered, if your problem resolved or helpful.
    • Proposed as answer by AnilSharma4 Monday, November 10, 2014 1:04 PM
    • Marked as answer by JasonGuo Friday, November 21, 2014 10:40 AM
    Monday, November 10, 2014 12:34 PM

All replies