Problem with retrieving Sharepoint list with js

Question

I am trying to retrieve list from SP page but I got following error:

Uncaught TypeError: Cannot read property 'apply' of undefined from MicrosoftAjax.js file.

It seems that it's due to the fact that the list is empty but my code was taken directly from MSDN tutorial for js in SP. Any ideas why I can't retrieve the list?

<script type="text/JavaScript"
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<script type="text/javascript" src="/_layouts/1033/init.js"></script>
<script  type="text/javascript" src="/_layouts/MicrosoftAjax.js"></script>
<script  type="text/javascript" src="/_layouts/sp.core.js"></script>
<script  type="text/javascript" src="/_layouts/sp.runtime.js"></script>
<script  type="text/javascript" src="/_layouts/sp.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script>

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {});

function retrieveListItems(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Work packages');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' +
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);


    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        '\ntitle: ' + oListItem.get_item('RemainingWork') + '\nbody: ' + oListItem.get_item('body');
        listItemInfo += '\nID: ' + oListItem.get_id() +
            '\ngroup: ' + oListItem.get_item('RemainingWork');

    }
    $('#message').text(listItemInfo.toString());
}
retrieveListItems("https://mycompany.com/cases/Change2/Lists/WorkPackages/My%20open%20work%20packages.aspx");

</script>

Answer 1

I do it most of the time via REST. For me it is clearer and also less code.

<script type="text/javascript">

    $(document).ready(function() {    

        // Rest Call
        var requestUri = "/_api/lists/getbytitle('Work packages')/items";

            $.ajax({
                url: requestUri,
                type: "GET",
                headers: { "ACCEPT": "application/json;odata=verbose" },
                success: function (data) {
                    $.each(data.d.results, function (i, item){
                        var title = item.Title;
                        var currentItemID = item.ID;                             

                        // Check Work packages item   
                        alert("Item Nr: " + currentItemID + "Title: " + title);                 
                    })
                },
                error: function () {
                    alert("Error getting items");
                }                     
            });   
});                              
</script>

Maybe this will help you as well.

Update 1:

How to call a list check here: https://msdn.microsoft.com/en-us/library/office/fp142380.aspx

Short explanation:

http://server/site/_api/lists/getbytitle('listname')

Update 2:

First you have to check that you can reach the list / library via the URL.

You should get something like this:

Explanation:

1. http://afrait.com -> The "name of my SharePoint"
2. englishtest -> subsite
3. _api/lists/getbytitle -> fixed portion + ('documents') -> name of my library
4. /items -> also fixed (getting all items in the list)

Answer 2

I know this is an old thread, but I had this exact issue and came across this thread several times while searching and searching for a solution. Unfortunately, REST calls don't work well for my situation, since I'm also getting a Publishing Image column (Type="Image") and using REST you have to make a separate call for each list item.

I was able to solve this issue by using this code and working my way back from it, since it worked when I ran it. I finally found the problem to be the call:

clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );

When I compared to the github example, their call was like this:

clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

When I took out the Function.createDelegate part and just used the syntax they used, the error went away and I'm now able to load the list items! As far as why this would be, maybe someone can shed some more light on this for us than I can? All I know is that whatever I tried, even testing on a Sharepoint Hosted add-in instead of Provider Hosted, it never worked until I changed this code. Now I can even use Sharepoint JSOM using the Cross Domain Library on my Provider Hosted add-in on the web side. This is very valuable to me, especially when working with Publishing Images because of the limitations in this area with REST.

I really hope this helps someone else in my position and saves you the hours I spent tracking this down!

Cheers!

Paul