none
SharePoint 2013 - Rest API Date and Percentage Format RRS feed

  • Question

  • Hello Community,

    I am using JQuery and REST API for a SharePoint View.  The query returns the data I need but unfortunately the formatting for Dates and Percentages is not right.

    Here is the code I am using:

    
    
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    var listItemInfo = "";
    
                    $.each(data.d.results, function(key, value) {
                        listItemInfo += "<tr><td>Status</td><td>Task#</td><td>MOP Goal</td><td>Mop Status</td>"
    					+ "<td>MOE Goal</td><td>MOE Status</td><td>Last Modified</td>"
    					+ "<tr><td>" + value.Status 
    					+ "</td><td>" + value.Task_x0020__x0023_ 
    					+ "</td><td>" + value.MoP_x0020_Goal 
    					+ "</td><td>" + value.MoP_x0020_Status 
    					+ "</td><td>" + value.MoE_x0020_Goal 
    					+ "</td><td>" + value.MoE_x0020_Status
    					+ "</td><td>" + value.Last_x0020_Modified1 
    					+ "</td></tr>";
                    });
    
                    $("#listItems").html(listItemInfo);
                },
                error: function(data) {
                    alert('An Error Has Occured');
                }
            });
        }
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>

    Here is the Date format I get: 2017-03-17T17:36:40Z

    Here is the date format I want: 17 Mar 2017, 10:36 AM

    Here is the Percentage format I get: 0.1

    Here is the Percentage format I want: 10%

    Please provide guidance and code examples.

    Thanks!

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Friday, March 17, 2017 6:09 PM

Answers

  • Hi Tom,

    My bad, instead of using the link below in your script src, save the contents to a js file, upload it to Style Library and then reference it.

    https://raw.githubusercontent.com/phstc/jquery-dateFormat/master/dist/jquery-dateFormat.min.js

    Regards

    Paramdeep Singh


    SharePoint Architect


    Friday, March 17, 2017 9:02 PM

All replies

  • Hi Tom,

    You can use the jquery-dateFormat from the below location to format your date:

    https://github.com/phstc/jquery-dateFormat


    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/phstc/jquery-dateFormat/master/dist/jquery-dateFormat.min.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    var listItemInfo = "";
    
                    $.each(data.d.results, function(key, value) {
                        listItemInfo += "<tr><td>Status</td><td>Task#</td><td>MOP Goal</td><td>Mop Status</td>"
    					+ "<td>MOE Goal</td><td>MOE Status</td><td>Last Modified</td>"
    					+ "<tr><td>" + value.Status 
    					+ "</td><td>" + value.Task_x0020__x0023_ 
    					+ "</td><td>" + value.MoP_x0020_Goal 
    					+ "</td><td>" + Math.floor((value.MoP_x0020_Status) * 100) + "%" 
    					+ "</td><td>" + value.MoE_x0020_Goal 
    					+ "</td><td>" + value.MoE_x0020_Status
    					+ "</td><td>" + $.format.date(value.Last_x0020_Modified1 , "d MMM yyyy, h:mm a") 
    					+ "</td></tr>";
                    });
    
                    $("#listItems").html(listItemInfo);
                },
                error: function(data) {
                    alert('An Error Has Occured');
                }
            });
        }
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>

    I have used Math.floor function to format your percentage value as in SharePoint the percentage column value is returned as number, so manual manipulation is required to display it as percentage.

    Let me know if it helps.

    Regards

    Paramdeep Singh


    SharePoint Architect


    Friday, March 17, 2017 8:32 PM
  • Hello Paramdeep,

    Thank you for that excellent reply, there is just one issue, the date format throw this error:

        "Unable to get property 'date' of undefined or null reference"

    Would you know what the error is?

    Thanks!

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Friday, March 17, 2017 8:55 PM
  • Hi Tom,

    My bad, instead of using the link below in your script src, save the contents to a js file, upload it to Style Library and then reference it.

    https://raw.githubusercontent.com/phstc/jquery-dateFormat/master/dist/jquery-dateFormat.min.js

    Regards

    Paramdeep Singh


    SharePoint Architect


    Friday, March 17, 2017 9:02 PM
  • Hi Tom,

    More info about jquery-dateFormat below:

    https://github.com/phstc/jquery-dateFormat

    Thanks

    Paramdeep Singh


    SharePoint Architect

    Friday, March 17, 2017 9:08 PM
  • Hey Paramdeep,

    I'm still getting the same error, here is my current code:

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="/prgm/provost/CampaignPlan/SiteAssets/JQuery/jquery-dateFormat.js"></script>
    <script type="text/javascript">
        function getListDetails() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Master Tasks')/items",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    var listItemInfo = "<table><tbody><tr class='Header'><td>Status</td><td>Task #</td>"
    					+ "<td>Org</td><td>LOE</td><td>AO Assigned</td><td>Priority</td><td>MOP Goal</td>"
    					+ "<td>MOP Status</td><td>MOE Goal</td><td>MOE Status</td><td>Last Mod</td></tr>";
    
                    $.each(data.d.results, function(key, value) {
                        listItemInfo += "<tr><td>" + value.Status 
    					+ "</td><td>" + value.Task_x0020__x0023_ 
    					+ "</td><td>" + value.Organization
    					+ "</td><td>" + value.LOE
    					+ "</td><td>" + value.AO_x0020_Assigned
    					+ "</td><td>" + value.Priority
    					+ "</td><td>" + Math.floor((value.MoP_x0020_Goal) * 100) + "%" 
    					+ "</td><td>" + Math.floor((value.MoP_x0020_Status) * 100) + "%" 
    					+ "</td><td>" + Math.floor((value.MoE_x0020_Goal) * 100) + "%" 
    					+ "</td><td>" + Math.floor((value.MoE_x0020_Status) * 100) + "%"  
    					+ "</td><td>" + $.format.date(value.Last_x0020_Modified1, "d MMM yyyy, h:mm a") 
    					//+ "</td><td>" + value.Last_x0020_Modified1 
    					+ "</td></tr>";					
    			
                    });
    				
    				listItemInfo += "</tbody></table>"
    
                    $("#listItems").html(listItemInfo);
                },
                error: function(data) {
                    alert('An Error Has Occured');
                }
            });
        }
        _spBodyOnLoadFunctionNames.push("getListDetails");
    </script>
    

    Thanks!

    Tom


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Friday, March 17, 2017 9:22 PM
  • It's working, needed a better URL reference for source - Great!  Thanks!

    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy


    Friday, March 17, 2017 9:31 PM