How to count items in list via JavaScript? SharePoint 2013

Question

I was wondering how can I count list items. I have done this with C# and I have the following code:

        SPWeb thisWeb = SPContext.Current.Web;

        SPList vlist = thisWeb.Lists["Vacancies"];
        SPListItemCollection listitems = vlist.GetItems();

        int sum = 0;
        int sum1 = 0;
        int sum2 = 0;
        foreach (SPListItem item in listitems)
        {
            if (item["Status"].ToString() == "Completed")
            {
                sum++;
            }

            if (item["Status"].ToString() == "In progress")
            {
                sum1++;
            }
            if (item["Status"].ToString() == "Rejected")
            {
                sum2++;
            }
        }

This code works perfect, how can I convert this code into JavaScript to do the same function?

I have 3 Statuses

• Completed
• In progress
• Rejected

So int sum should represent the number of items with Completed Status,

int sum1 should represent the number of items with In progress Status, and

int sum2 should represent the number of items with Rejected Status.

The name of list is Vacancies

Please help me! Thanks

Answer 1

You can follow the below code:

function retrieveListItems() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('Vacancies');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
    var collListItem = oList.getItems(camlQuery);

    clientContext.load(
        collListItem, 
        'Include(Status)'
    );
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var sum =0;
    var sum1 =0;
    var sum2 =0;
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var status = item.get_item('Status');
        if(status=="Completed"){
            sum++;
        }
        else if(status=="In progress"){
            sum1++;
        }
        else if(status=="Rejected"){
            sum2++;
        }        
    }

}

function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

To call this method use it like this:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);

Answer 2

Or if you want to use REST and ajax:

var siteurl = _spPageContextInfo.webAbsoluteUrl;
        $.ajax({
                   url: siteurl + "/_api/web/lists/getbytitle('Vacancies')/items",
                   method: "GET",
                   headers: { "Accept": "application/json; odata=verbose" },
                   success: function (data) {
                        if (data.d.results.length > 0 ) {
                                var sum =0;
                                var sum1 =0;
                                var sum2 =0;
                                $.each(data.d.results, function(item){
                                    if(item.Status === "Completed")
                                      sum++;
                                    if(item.Status === "In Progress")
                                      sum1++;
                                    if(item.Status === "Rejected")
                                      sum2++;
                                });                             
                        }       
                  },
                  error: function (data) {
                      alert("Error: "+ data);
                 }
          });