0

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?

7
  • Do you need to use SPServices? Why not use REST to query all items from the list, and then use jQuery's $.grep() method to query the returned object? You'll only call the list once this way.
    – wjervis
    Feb 27, 2015 at 20:36
  • @wjervis Please forgive my inexperience with the subject. if SPServices isn't neccessary for this sole function, then I guess I don't need it. What would a REST query using $.grep() look like? Feb 27, 2015 at 21:15
  • What version of SharePoint are you using? 2010? 2013? If 2013, are you on prem or SPO?
    – wjervis
    Feb 27, 2015 at 22:24
  • @wjervis SP 2010 Feb 28, 2015 at 1:06
  • ah, not sure what you have available to you in 2010 as far as client object model goes. I'll see what I can find.
    – wjervis
    Mar 1, 2015 at 4:13

1 Answer 1

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);
            });
        }
    });
}
3
  • This looks good. I'll give it a shot and see how fast the page will load. Thanks! Mar 3, 2015 at 1:04
  • Doing it this way, you might even be able to make them async: true, that might speed things up a little bit. Mar 3, 2015 at 13:34
  • 'async:true' sped it up drastically. Thanks a ton for this! Mar 5, 2015 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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