2

First of all sorry for the bad title, just can't think of any better.

I'm very new to JavaScript, which may be the only reason why I just don't get this - please don't blast me.

What I want to do is simply query multiple Sharepoint lists (maybe even multiple times) from a Sharepoint site by using JavaScript Client Object Model. I was able to find many working examples on the web how to retrieve data from a list and work with it. But I'm so unfamiliar with the async and callback concepts that I cannot tranfer the concept to my needs. Do I actually have to copy all the variables and functions x times?

Here is what I got for one single call:

var listAItems;

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(LoadChartData, "sp.js");
});

function LoadChartData() {
  context = SP.ClientContext.get_current();
  var listA = context.get_web().get_lists().getByTitle("ListA");
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  this.listAItems = listA.getItems(camlQuery);

  context.load(listAItems);
  context.executeQueryAsync(ReadListAItemSucceeded, ReadListItemFailed);
}

function ReadListAItemSucceeded(sender, args) {
  var listAItemsCollection = listAItems.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
}

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

I ended up copying all the code to get it running but that cannot be the way to go since it is just a mess - there must be an actual design.

var listAItems;
var listBItems;

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(LoadChartData, "sp.js");
});

function LoadChartData() {
  context = SP.ClientContext.get_current();
  var listA = context.get_web().get_lists().getByTitle("ListA");
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  this.listAItems = listA.getItems(camlQuery);

  context.load(listAItems);
  context.executeQueryAsync(ReadListAItemSucceeded, ReadListItemFailed);

  context2 = SP.ClientContext.get_current();
  var listB = context.get_web().get_lists().getByTitle("ListB");
  var camlQuery2 = SP.CamlQuery.createAllItemsQuery();
  this.listBItems = listB.getItems(camlQuery2);

  context2.load(listBItems);
  context2.executeQueryAsync(ReadListBItemSucceeded, ReadListItemFailed);
}

function ReadListAItemSucceeded(sender, args) {
  var listAItemsCollection = listAItems.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
}

function ReadListBItemSucceeded(sender, args) {
  var listBItemsCollection = listBItems.getEnumerator();

  while (listBItemsCollection.moveNext()) {
    var listBItem = listBItemsCollection.get_current();
    //do something with each listItem
  }
}

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

Why I want to query multiple lists is obvious, reason to query the same list is to provide different CAML expressions with different where conditions for instance.

Thank you very much in advance!

2
  • Why are you not using a single context and loading it up with both listAItems and listBItems?
    – Daniel B
    Jul 9, 2015 at 10:38
  • @DanielB, thank you for the comment! Reason might be incorrect assumtions. I did it because auf the global variable which is passed to the context.load method and accessed within the success callback to get the enumerator.
    – Toby
    Jul 9, 2015 at 11:14

1 Answer 1

7

Async concept is not difficult, you must think: "do this and when you finish call this function", the concept is then applied to the visibility of variables, in javascript this is called closure

In your code you can do this (Warning I not tested the code below)

$(document).ready(function() {      
  ExecuteOrDelayUntilScriptLoaded(loadChartData, "sp.js");
});

function loadChartData() {
    loadListData("listA", listASuccess, globalError);
    loadListData("listB", listBSuccess, globalError);
}

function loadListData(listName, onSuccess, onFail) {
  context = SP.ClientContext.get_current();
  var list = context.get_web().get_lists().getByTitle(listName);
  var camlQuery = SP.CamlQuery.createAllItemsQuery();
  var listItems = list.getItems(camlQuery);

  context.load(listAItems);
  
  context.executeQueryAsync(
        function(sender, args) { 
            // listItem is defined on same closure, you do not need to declare globally
            onSuccess(listItems); 
        }, 
        onFail
  );
  
}

function listASuccess(data) {
  
  var listAItemsCollection = data.getEnumerator();

  while (listAItemsCollection.moveNext()) {
    var listAItem = listAItemsCollection.get_current();
    //do something with each listItem
  }
  
  // You can use also forEach like this
  // data.forEach(function(listItem) {
  //    //do something with each listItem
  // });
}

function listBSuccess(data) {
  
  var listBItemsCollection = data.getEnumerator();

  while (listBItemsCollection.moveNext()) {
    var listBItem = listBItemsCollection.get_current();
    //do something with each listItem
  }
  
  // You can use also forEach like this
  // data.forEach(function(listItem) {
  //    //do something with each listItem
  // });
}

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

See closure See forEach

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.