How to consolidate JS for CAML queries with multiple filters?

Question

I'm very new at the entire JS/SPServices concept (and JS as a whole) and I'm trying to slim down the amount of JS needed for a few HTML pages.

I have several unordered lists on the HTML page that I am using JS to append list items to. I'm using SPServices "GetListItems" to pull items from a SP list, using CAML queries to filter the items based the value of 4 fields, which I then append the "Title" field of to the unordered lists on the page.

The problem is that I have 24 unordered lists on the page, each of which requires a unique CAML query to filter the same SP list data to get the values for. I'm looking for a more efficient way of writing the JS so that I do NOT have to call the same list 24 times for each page. Here's the beginning of what I have:

$(document).ready(function() {

    $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "newslist",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' /></OrderBy><Where><And><And><And><Eq><FieldRef Name='Topic' /><Value Type='Text'>company</Value></Eq><Eq><FieldRef Name='Period' /><Value Type='Text'>Q4 2014</Value></Eq></And><Eq><FieldRef Name='Division' /><Value Type='Text'>legal</Value></Eq></And><Eq><FieldRef Name='area' /><Value Type='Text'>highlights</Value></Eq></And></Where></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") +  "</li>";
        $("#highlights1").append(liHtml);
      });
    }
    });

    $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "newslist",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' /></OrderBy><Where><And><And><And><Eq><FieldRef Name='Topic' /><Value Type='Text'>company</Value></Eq><Eq><FieldRef Name='Period' /><Value Type='Text'>Q4 2014</Value></Eq></And><Eq><FieldRef Name='Division' /><Value Type='Text'>legal</Value></Eq></And><Eq><FieldRef Name='area' /><Value Type='Text'>downfalls</Value></Eq></And></Where></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") +  "</li>";
        $("#downfalls1").append(liHtml);
      });
    }
    });

    $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "newslist",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' /></OrderBy><Where><And><And><And><Eq><FieldRef Name='Topic' /><Value Type='Text'>company</Value></Eq><Eq><FieldRef Name='Period' /><Value Type='Text'>Q4 2014</Value></Eq></And><Eq><FieldRef Name='Division' /><Value Type='Text'>legal</Value></Eq></And><Eq><FieldRef Name='area' /><Value Type='Text'>coming soon</Value></Eq></And></Where></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") +  "</li>";
        $("#comingsoon1").append(liHtml);
      });
    }
    });

});

For each of the 3 unordered lists to be populated above, the "area" field of the query changes. I then have to repeat these 3 functions another 8 times, only changing the "topic" field once for each of the 8 (and obviously the unordered list selectors).

Any ideas on how to consolidate this?

Answer 1

Couldn't you refactor the SPServices call into another function, that takes the "area" value, "topic" value, and the list selector as parameters? You'd still be querying the list 24 times, but it will look a lot cleaner.

$(document).ready(function () {

    QueryNewsList("highlights", "company", "#highlights1");
    QueryNewsList("downfalls", "company", "#downfalls1");
    QueryNewsList("coming soon", "company", "#comingsoon1");

    // add your other permutations here

});

function QueryNewsList(area, topic, listSelector) {

    var camlQuery = "<Query><OrderBy><FieldRef Name='ID' /></OrderBy><Where><And><And><And><Eq><FieldRef Name='Topic' /><Value Type='Text'>" + topic + "</Value></Eq><Eq><FieldRef Name='Period' /><Value Type='Text'>Q4 2014</Value></Eq></And><Eq><FieldRef Name='Division' /><Value Type='Text'>legal</Value></Eq></And><Eq><FieldRef Name='area' /><Value Type='Text'>" + area + "</Value></Eq></And></Where></Query>";

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "newslist",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
        CAMLQuery: camlQuery,
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
                $(listSelector).append(liHtml);
            });
        }
    });
}