Display TASK status using REST API

Prem M

Hello,

I'm using below code (googled), to get the count from Status column. But this is not displaying the count.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
       
         0 
          
            
                Not-Started 
          
       
       
         0 
          
            
                In Progress 
          
       
       
         0 
          
            
                On-Hold 
          
       
       
         0 
          
            
                Completed 
          
       
       
         0 
          
            
                Cancelled

My SharePoint List is named as "Learning". And I have below choice options in Status column:

Not-Started
In Progress
On-Hold
Completed
Cancelled

I;m getting the output as below, but no count.

15 Replies

Know the answer? Post it — somebody with the same question will find it here.

Prem M5y ago
I'm not getting any alerts
+2
Sachin Singh5y ago
just check this and let me know what does it alert
success: function(data) {
                      var items = data.d.results;

            alert(items.length);

               },
I guess, you are getting null here.
+2
Prem M5y ago
No, I did not get any error.

Update the code both in Chrome and Edge. Still no luck
+2
Prem M5y ago
I also had below source code, which was updating the counts, but recently this does not gives the count.

See below code:
"text/javascript" src="http://teams.eeoon.com/corp/title/sitename/js_css/jquery.SPServices-0.7.2.min.js">  // have uploaded jquery 0.7.2 version to site documents
"javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Learning",
    viewName: "{f32a491f-d9c5-4c22-b0b5-3bf868290286}", // this is the view ID
    CAMLViewFields: "",
     completefunc: function(xData, Status) {
            itemCount1 = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
        }
    });
        var cmpl = itemCount1

        $("#Completed").append(cmpl);

      });






"500"  cellpadding="0px" cellspacing="5px" style="border:0px solid #fff;line-height:20px;margin-left:2px;border-collapse:separate !important;">
   "#FFFFFF" >

    "15%" align="center" valign="middle" style="padding:10px;color: white;font-size:14px;border:0px solid #ccc;font-weight:bold; background:#0bbc00;" id="Completed">Completed - "Completed">


Below is the output, that I'm getting;
+2
Vaibhav Chauhan5y ago
Can you see any error in browser console like:

$ is not defined... ?
+3
Prem M5y ago
Still no Luck:
1. function getCount(status) {
2. //console.log(category);
3. var listName = "Learning";
4. var query = "$filter=(Status eq '" + status + "')";
5. var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?" + query;
8. $.ajax({
9. url: http://teams.etn.com/corp/sitename/Lists/Learning,
10. method: "GET",
11. async: false,
12. headers: {
13. "Accept": "application/json; odata=verbose"
14. },
15. success: function(data) {
16. var items = data.d.results;
17. $(".card-header").html(items.length);
18. },
19. error: function(data) {
20. failure(data);
21. }
22. });
1. }
+2
Sachin Singh5y ago
test this
function getCount(status) {
        //console.log(category);
        var listName = "Learning";
        var query = "$filter=(Status eq '" + status + "')";
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?" + query;


        $.ajax({
                url: url ,
                method: "GET",
                async: false,
                headers: {
                        "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                       var items = data.d.results;
                 $(".card-header").html(items.length);
                },
                error: function(data) {
                        failure(data);
                }
        });

}
Note:- siteurl= url here
+2
Prem M5y ago
below are the items that we can see to my SP list:

+2
Sachin Singh5y ago
are you getting items.length= something? are you sure? I mean does your URL return the items?
+2
Prem M5y ago
Had already tried updating the code as provided by you, but still no luck.
+2
Sachin Singh5y ago
modify the getCount function as
function getCount(status) {
        //console.log(category);
        var listName = "Learning";
        var query = "$filter=(Status eq '" + status + "')";
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?" + query;

        getListItems(url, function(data) {
                var items = data.d.results;
                $('.card-header').html(items.length);
        });

}
+2
Prem M5y ago
Hi Viabhav,

I did checked all the library codes in the browser, which appears to be HTML code.

But I'm still not able to achieve the actual output.

By any chance, could you please provide me a handy code, which will give me the status count based on Status column. (similar to the sceen shot I'd shared)

Aplogize, but I'm not expert in writing codes.
+2
Vaibhav Chauhan5y ago
Correct.

Also you need to check every library you have added in the code. It should be accessible in html code.

Please Accept Answer if it helps you
+2
Prem M5y ago
Hi Vaibhav,

I'm not too good into writing codes
Do you mean to replace below:
"text/javascript" src="/corp/sitename/js_css/jquery-3.3.1.js">
with:
"https://ajax.googleapis.com/ajax/libs/js_css/jquery-3.3.1.js">
+2
Vaibhav Chauhan5y ago
Please verify the Jquery and other library path by accessing it in browser tab.

Use below code CDN path for jquery and search for other libraries CDN.

+2