REST API: How do I loop through list items and return a view showing sums for all items with same title?

Question

extreme newbie here. I have a list with 15 items. There are five items with the title "One", five with the title "Two", and five with the title "Three". Each of the items have a corresponding number column. I need to loop through this list and end up with a view like this:

• Name:"One" - Total (from number column):10 (or whatever number)
• Name:"Two" - Total (from number column):7
• Name:"Three" - Total (from number column):6

My code isn't working (probably for obvious reason but I'm just learning so can't see it). How would I accomplish this? Thanks!

$(document).ready(function(){   
    getCategories("MyList"); // start it off

});


function getCategories(listName){
    var url = _spPageContextInfo.siteServerRelativeUrl+
        "/_api/lists/getbytitle('MyList')/items?"+ 
        "$select=Rank,RequestName";
    $.ajax({
        url: url,
        method: 'GET',
        beforeSend: function (XMLHttpRequest){
            XMLHttpRequest.setRequestHeader('Accept', 'application/json; odata=verbose');
            },
        success: function( data ) {     
                createHTML(data, listName)
        }   
    }); 
}

function createHTML(data, listName){
var arr = data.d.results;

var container = $('#rankIt');

        var categoryLinksContainer = $('<div class="links-list" />');
var added = 0;          
var itemName = "";
 for(var i in arr){
        var item = arr[i];  
        var rank = item.Rank 
        var title = item.RequestName;

     itemName = title;
     added = rank;
      if(itemName == title){
          added = added + parseInt(rank);

      }

        var item = arr[i];  
        var rank = item.Rank 
        var title = item.RequestName;
        categoryLinksContainer.append(
                '<div class="link"><a href="#">'+itemName+'</a></div><div>'+added+'</div>'
        );
                categoryLinksContainer.appendTo(container);
  } 
}

Answer 1

You can try below code. This should work.

<script type="text/javascript">
    $(document).ready(function () {
    var summary ={};
        getListData().then(
            function (data, status, jqXHR) {
                var items = data.d.results;
                summary = groupBy(items);
                $.each(summary, function(index, val) {
                alert("Name:" + index + "- Total " + val);
                });                    
            },
            function (jqXHR, status, error) {
                var err = eval("(" + jqXHR.responseText + ")");
                console.log(err.Message);
            });
    });

    function getListData() {
        var listName = "Test"; //List Name
        var getbaseUrl = SP.Utilities.UrlBuilder.urlCombine(_spPageContextInfo.siteAbsoluteUrl, "_api/web/lists/");
        getbaseUrl += "GetByTitle('" + listName + "')/items?$select=Title,Number&$orderby=ID asc";
        var dfd = $.Deferred();

        dfd = $.ajax({
            url: encodeURI(getbaseUrl),
            type: "GET",
            contentType: "application/json; odata=verbose",
            headers: {
                "accept": "application/json; odata=verbose"
            }
        });
        return dfd.promise();
    }

    function groupBy(items){
        var result= {};
        var sum;
        console.log(items);                    
        $.each(items, function(index, item) {
        sum = result[item.Title] || 0;
        result[item.Title] = sum + item.Number;                     
});
return result;
}
</script> 

This should print

Name:One- Total 10

Name:Two- Total 7

Name:Three- Total 6