Retrieving list items from SharePoint online to HTML

Question

I need to pull/post data ( list items ) from/to SharePoint online to/from another environment like HTML, PHP that hosted externally or in WordPress to share it with the public.

I tried this JS code but unfortunately it is not working ... could you please tell me where is the problem :

$(function (){
    function retrieveListItem()

    })

    function retrieveListItem(){


var siteURL =new SP.ClientContext('https://******.sharepoint.com');
var fullUrl = siteURL+"/_api/web/lists/GetByTitle('Cities')/items";

        $.ajax({
            url: fullUrl,

            type:"GET",
            headers:{

                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
            },

            seccess: onQuerySucceeded,
            error: onQueryFaild

        });


    }

    function  onQuerySucceeded(data){

        var listItemInfo='';
        $.each(data.d.results, function (key, value){
            listItemInfo +='<strong>ID:' +value.Title+'<br />'


        });

        $("#divListItems").html(listItemInfo);

    }

    function onQueryFaild(sender, args){

        alert('Error!');

    }

HTML code :

<div id="divListItems">


</div>

Answer 1

You could directly call Rest API and then append item in a html table within the div like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(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 = '<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>';
 }
   $('#carsGrid').append(tableContent);
   }
    function onError(error) {
        alert('Error');
   }
  });
});

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

Reference:

SHAREPOINT ONLINE, 2013 AND 2016 – DISPLAY LIST DATA IN GRID USING REST API

Answer 2

First of all I see duplicate function retrieveListItem. Use SP only when context is loaded, use this line to call your function

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', YourMethod());

And when loading SP context you don't need to connect to url. Because js file is already in SharePoint

SP.ClientContext.get_current()

Answer 3

You have two options to query content from another site:

1. Use server side CSOM calls (e.g. C#) to query the SharePoint API
2. Issue a client-side Cross-Domain Request (CORS), which requires CORS to be properly configured on your SharePoint site as well as the client "host" site.

I won't get into the details of enabling CORS since you can easily find more in-depth articles on that elsewhere for your specific setup. It can be challenging to get started but it's definitely doable.

If you have access to the server side and are familiar with server-side coding against SharePoint, I would recommend that route.