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?

  • 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 '15 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? – commandqueue Feb 27 '15 at 21:15
  • What version of SharePoint are you using? 2010? 2013? If 2013, are you on prem or SPO? – wjervis Feb 27 '15 at 22:24
  • @wjervis SP 2010 – commandqueue Feb 28 '15 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 '15 at 4:13
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);
            });
        }
    });
}
  • This looks good. I'll give it a shot and see how fast the page will load. Thanks! – commandqueue Mar 3 '15 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. – Dylan Cristy Mar 3 '15 at 13:34
  • 'async:true' sped it up drastically. Thanks a ton for this! – commandqueue Mar 5 '15 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.