0

I have a SharePoint custom list called CIW that has a column called Status and this has the following possible values;

"Completed", "In Progress", "Not Started" & "Cancelled".

I would like jQuery to run against the list and get a total of each of the Status, e.g.

"Completed"=20, "In Progress"=11, "Not Started"=15 & "Cancelled"=3

If possible output the results to a table.

0

There are a couple of OOTB option available I would recommend you to try this before you want to code for it.

  1. Create new view select the columns you want to display then GroupBy based on 'Status' column.
  2. As mentioned in your comments filter the column to show 'Count'.

Conside first option if your interested in-build Expand/Collapse in addition to the total count.

Code option:

0

If you want to output the results to a table using jQuery, the following code for your reference:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {    
    var listName="CIW";

    var requestUri = _spPageContextInfo.webAbsoluteUrl +
                  "/_api/Web/Lists/getByTitle('"+listName+"')/items?$select=Status";

    //execute AJAX request
    $.ajax({
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        success: function (data) {
            var completedCount=0,inProgressCount=0,notStartedCount=0,cancelledCount=0;

            for(var i=0;i<data.d.results.length;i++){
                var item=data.d.results[i];
                if(item.Status=="Completed"){
                    completedCount++;
                }else if(item.Status=="In Progress"){
                    inProgressCount++;
                }else if(item.Status=="Not Started"){
                    notStartedCount++;
                }else if(item.Status=="Cancelled"){
                    cancelledCount++;
                }
            }
            var html="<table border='1' cellspacing='0' cellpadding='0'><thead><tr><th>Status</th><th>Count</th></tr></thead>";
            html+="<tbody><tr><td>Completed</td><td>"+completedCount+"</td></tr>";
            html+="<tr><td>In Progress</td><td>"+inProgressCount+"</td></tr>";
            html+="<tr><td>Not Started</td><td>"+notStartedCount+"</td></tr>";
            html+="<tr><td>Cancelled</td><td>"+cancelledCount+"</td></tr></tbody></table>";
            $("#CIWCount").html(html);
        },
        error: function () {
            //alert("Failed to get details");                
        }
    });
});
</script>
<div id="CIWCount"></div>

enter image description here

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.