Query multiple lists using javascript/CSOM

Question

I'm about to query multiple lists using JavaScript (JSOM, SharePoint 2010). It's working when querying one list in a time, but that's annoying when I'm having lots of lists. Working example:

    function createLists() {
      getListData1();
      getListData2();
    }   

    function getListData1() {
      var context = new SP.ClientContext(url);
      var camlQuery = new SP.CamlQuery();
      [...]
      context.load(listItems);
      context.executeQueryAsync(
             Function.createDelegate(this, this.onQuerySuccess1),
             Function.createDelegate(this, this.onQueryFailed)
        );
    }

    function getListData2() {
      [...]
      context.executeQueryAsync(
             Function.createDelegate(this, this.onQuerySuccess2),
             Function.createDelegate(this, this.onQueryFailed)
        );
    }

But what I want to do is to reuse the function extractData, like this:

    function createLists() {
      getListData(url, List1);
      getListData(url, List2);
    }  

    function getListData(siteUrl, listName) {
      var context = new SP.ClientContext(siteUrl);
      var camlQuery = new SP.CamlQuery();
      var list = context.get_web().get_lists().getByTitle(listName);
      [...]
      context.load(listItems);
      context.executeQueryAsync(
             Function.createDelegate(this, this.onQuerySuccess),
             Function.createDelegate(this, this.onQueryFailed)
        );
    }       

Unfortunately that seems to create some conflict, probably has to do with the asynchronous function? Is it possible to reuse an asynchronous call like this or do I need to create individual functions for each and every query?

Answer 1

The OOP suggestion solves your context problem but it is kinda like saying:

We have a flat tire, lets change cars!

Your issue is with the this context you give to your processing function, so lets fix that tire.

Instead of passing it the whole truck you only want to pass the payload:

with: processItems.bind(request)

function getItems(listName,siteUrl){
    var request={};
    request.listName=listName;
    request.siteUrl=siteUrl || _spPageContextInfo.siteAbsoluteUrl;
    var ctx = new SP.ClientContext(request.siteUrl);
    var list = ctx.get_web().get_lists().getByTitle(request.listName);
    request.query=SP.CamlQuery.createAllItemsQuery();
    request.itemCollection=list.getItems(request.query);
    ctx.load(request.itemCollection);
    ctx.executeQueryAsync(  processItems.bind(request)  ,failure);
}
function processItems() {
    var received=this;//received 'request' from Caller
    received.items=[];
    var listEnumerator = received.itemCollection.getEnumerator();
    while (listEnumerator.moveNext()) {
        var listitem = listEnumerator.get_current();
        received.items.push(listitem.get_id());
    }
    console.info(received.listName,'has',received.items.length,'items IDs:',received.items);
}
function failure(sender, args){
    console.error(args.get_message());
}
console.clear();
for(var cycle=1;cycle<4;cycle++){// call multiple times to show ASYNC result in the console
    console.log('Calling 3 lists cycle:',cycle);
    getItems('Tasks');
    getItems('Documents');
    getItems('Images');
}

You could have bound just the itemCollection itself, but I elaborated a bit to show how to pass more data.

For (oldschool) CreateDelegate and (since ES-5) bind() differences see: Differing ways to make executeQueryAsync calls - Function.createDelegate (is old IE8 code)

Run this and you will see the asynchronous responses:
(Tasks was requested first, but Documents was received first, etc)

J1 J5 iJSOM TOP5

Answer 2

As you guessed, the problem is most probably because of messed-up variables called between two different contexts in the onQuerySuccess methods.
One way around this would be to create a JavaScript class to encapsulate all this client API calls.

See for instance https://stackoverflow.com/a/387733/3439544 that explains how to create a class.

In your case, you'd have say a "Query" class. It contains a siteUrl and a listName properties (aka name and gender in the mentionned post). And also a this.listItems initialized but not set from the constructur at the moment.
Methods (prototypes) of this class would be a .Query and both onQuerySuccess and onQueryFailed.

Sample (not tested, just so you get my point):

// Define a class like this
function QueryList(siteUrl, listName){

   // Add object properties like this
   this.siteUrl = siteUrl;
   this.listName = listName;
   this.listItems = null;
}

// Add methods like this.  All Person objects will be able to invoke this
QueryList.prototype.query = function(){
      var context = new SP.ClientContext(this.siteUrl);
      var camlQuery = new SP.CamlQuery();
      var list = context.get_web().get_lists().getByTitle(this.listName);
      [...]
      this.listItems = ...
      context.load(this.listItems);
      context.executeQueryAsync(
             Function.createDelegate(this, this.onQuerySuccess),
             Function.createDelegate(this, this.onQueryFailed)
        );
};

QueryList.prototype.onQuerySuccess = function(...){
 // Access values from this.listItems
 ...
};

QueryList.prototype.onQueryFailed = function(...){
 ...
};



// Usage

// Instantiate new objects with 'new'
var query1 = new QueryList(url, List1);
query1.query();

var query2 = new QueryList(url, List2);
query2.query();

Answer 3

 function createLists() {
  extractData(url, List1);
  extractData(url, List2);
}  

function extractData(siteUrl, listName) {
  var context = new SP.ClientContext(siteUrl);
  var camlQuery = new SP.CamlQuery();
  var list = context.get_web().get_lists().getByTitle(listName);
  [...]
  context.load(listItems);
  context.executeQueryAsync(onQuerySuccess,onQueryFailed);
}  

function onQuerySuccess() {
    //Your code here
}

function onQueryFailed() {
    //Your code here
}

Try this should work for you