Retrieving list items using Javascript and Caml query

Question

Hi guys I'm new to SharePoint dev and working on a project to retrieve list items. I have followed the instructions from http://msdn.microsoft.com/en-us/library/office/ee539350(v=office.14).aspx and made sure to add my javascript file in the html source of my content editor but still don't get the expected results. I've looked in my developer console for any errors in my JavaScript but nothing seems wrong. Any advice on this will be great. Thanks.

var siteUrl = '/Lists/My_x0020_Rooms';

SP.SOD.ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

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

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><eq>' + 
        '<FieldRef Name=\'Building\'/><Value Type=\'Choice\'>Headquarters_x0020_Building</Value>' + 
        '</eq></Where></Query><RowLimit>50</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();
        listItemInfo += '\nBuilding: ' + oList.get_item('Building');
    }

    alert(listItemInfo.toString());

    document.getElementById('queryResults').innerHTML=listItemInfo.toString();
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Answer 1

I doubt your list title is My_x0020_Rooms

SP.ListCollection.getByTitle(strListName) uses the list title. My guess is that you have replaced the space with _x0020_ like you do with InternalNames of fields. So try changing it to:

var oList = clientContext.get_web().get_lists().getByTitle('My Rooms'); 

Edit:

You have done the same with siteUrl, that should not be the URL to the list, but the site. If you are running the script from the same site as your list is in, you could use:

var clientContext = SP.ClientContext.get_current(); 

If not, use it as described on MSDN:

var object = new SP.ClientContext(serverRelativeUrlOrFullUrl)

serverRelativeUrlOrFullUrl The server-relative URL that starts with / or a full URL that starts with http:// or https://.

Answer 2

This script seems to be what I need too, but get errors aswell. Modified it to incorporate the suggested errors as well as to suit my need

     $(document).ready(function retrieveListItems() {
    JSRequest.EnsureSetup();
    var school_id = JSRequest.QueryString["School_id"]; 
    var camlQuery = new SP.CamlQuery();   
    var clientContext = SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('Contacts');

    camlQuery.set_viewXml("<View><Query><Where><eq> <FieldRef Name='school_id'/><Value Type='Text'>" + school_id + "</Value></eq>" +
    "</Where></Query><RowLimit>100</RowLimit></View>");

    var collListItem = oList.getItems(camlQuery);
    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();
        listItemInfo += '\nContact: ' + oList.get_item('Contact');
    }
    alert(listItemInfo.toString());
    document.getElementById('queryResults').innerHTML=listItemInfo.toString();
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

However when running it, I get following error

Uncaught TypeError: Cannot read property 'apply' of undefined

clicking the link to the source brings me to

// MicrosoftAjax.js

(wtf) What might cause an error in an external library like Ajax?

Answer 3

Error is in below part of the code inside success :

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    listItemInfo += '\nBuilding: ' + **oList.get_item('Building');**
}

Replace listItemInfo as below :

listItemInfo += '\nBuilding: ' + **oListItem.get_item('Building');**

Answer 4

I have found this Client framework which helps a lot when you create a CAML query on client side.

Even if you don't want to use this Script for CAML, It has also a Plugin for Chrome where you can test the final CAML Query over the list page in your browser.

https://camljs.codeplex.com/