How to format the output from CAML Query in SP Services

Question

    `
    `function getFunding(){
    `   var Funding = [{}];
    `   var i = 0;
    `  //Web Service
    `$().SPServices ({
    `      webURL: FundingWebURL,
    `      operation: 'GetListItems',
    `      listID: '{BB6490.......}',
    `      async: false,
    `      CAMLRowLimit:20,
    `      CAMLViewFields: "<ViewFields>" +
    `          "<FieldRef Name='ID' />" +
    `          "<FieldRef Name='FRID' />" +
    `          "<FieldRef Name='Title' />" +
    `          "<FieldRef Name='Date' /><Value IncludeTimeValue='FALSE'         `Type='DateTime'></Value>" +
    `          "<FieldRef Name="Amount' />" +
    `      "</ViewFields>",

    `CAMLQUERY:   
    `      "<Query>" +
    `         "<Where>" +
    `            "<Contains>" +
    `              "<FieldRef Name='FRID' />" <Value         `Type='text'>1</Value>" +
    `            "</Contains>" +
    `         "</Where>" +
    `         "<OrderBy>"+
    `            "<FieldRef Name='Title' Ascending='TRUE' />" +   
    `         "</OrderBy>" +
    `     "</Query>",
    `completeFunc: function(xData, Status) {
    `   //alert (xData.responseText);
    `  $(xData.responseXML).SPFilterNode("z:row").each(function() {
    `        Funding[i] = {
    `            "Info" :   $(this).attr('ows_Title'),
    `            "ID" :     $(this).attr('ows_FRID'),
    `            "FY" :     $(this).attr('ows_Date'),
     `           "Amount" : $(this).attr('ows_Amount'),
    `};
    `i++;
    `});
    `}
    `});// SP Services

    `var FundingHTML="";
    `
    `for (var i=0; i < Funding.length; i++ ) {
    `   var value = "<table><tr><td width=100px>ID:" + Funding[i].ID +"        `</td>
    `                <td width=300px>Title: " + Funding[i].Info +"</td>
    `                <td width=200px>FY: " + Funding[i].FY +"</td>
    `                <td width=200px>Amount: " + Funding[i].Amount +"        `</td>
    `                </tr></table>";
    `   value = value.replace("string;#","");
    `   FundingHtml+= value + "<br/>";
    `}
    `FundingHtml+= "<br/><a href=https:/.........</a>"
    `$("#Funding").html(FundingHtml);
    `}
    `

`

gives me the following output: 2022-05-30 00:00:00
I want this output: 05/30/2022 and I want to return values of whatever the current ID is and not set a specific value?

Any help with modifying this script is appreciated. Thank you in advance.

How or where do I format this? Does anyone have a code sample?

Should also note - having to do all this by hand - don't have access to CAML Query builder tool — user95039
– user95039, Commented Mar 24, 2022 at 12:37

Rob Windsor · Accepted Answer · 2022-03-24 15:46:20Z

There are a couple options.

You could use the native JavaScript method toLocaleDateString() on the Date type to format the date:

<date object>.toLocaleDateString("default", {dateStyle: "short"})

You could use a library like moment.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"> </script>

var dateMoment = moment(<date object>); dateMoment.format("MM/DD/YYYY");

I would recommend using moment.js as it provides more options on how the date may be formatted.

Resources:

https://www.w3schools.com/jsref/jsref_tolocalestring.asp

https://momentjs.com/docs/#/displaying/format/

Here's a sample that demonstrates how to use both methods.

<div>
  <button type="button" onclick="getItems()">Get Items</button>
</div>
<div>
  <ul id="productsUL"/>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script type="text/javascript">
  function getItems() {
    $().SPServices({
      operation: "GetListItems",
      async: false,
      listName: "Products",
      CAMLViewFields: "<ViewFields>" +
        "<FieldRef Name='Title' />" + 
        "<FieldRef Name='Modified' />" + 
        "</ViewFields>",
      completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
          var lastModifiedDate = new Date($(this).attr("ows_Modified"));

          // var lastModifiedDateString = lastModifiedDate.toLocaleDateString("default", {dateStyle: "short"});

          var lastModifiedDateMoment = moment(lastModifiedDate);
          var lastModifiedDateString = lastModifiedDateMoment.format("MM/DD/YYYY");

          var liHtml = "<li>" + 
            $(this).attr("ows_Title") + 
            "; Last modified on " + lastModifiedDateString +
            "</li>";
          $("#productsUL").append(liHtml);
        });
      }
    });
  }
</script>

Have modify to show whole code - where would I put the <date object> line? — user95039
– user95039, Commented Mar 24, 2022 at 12:38
@user95039 I added a code sample to my answer. I hope this helps — Rob Windsor
– Rob Windsor, Commented Mar 24, 2022 at 15:46

Stack Exchange Network

How to format the output from CAML Query in SP Services

1 Answer 1

Your Answer

Hot Network Questions

How to format the output from CAML Query in SP Services

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions