CODEWITHSUNDEEP
jqueryhtmlangularjsjson
beginner
beginner

Reputation: 303

Merge the total amount month wise

I am getting data in tabular form. Now i need to merge the data of same month. Display the table like below. Please help me with this. Thanks in advance For example: Currently the table is like

Month | Total Amount
Jan   | 100
Jan   | 100
Mar   | 200
Apr   | 300
Apr   | 200

I want the output to be like 

 Month | Total Amount
    Jan   | 200
    Mar   | 200
    Apr   | 500

Here is the code:

    success: function (data) {
        if (data.length > 0) {

            var tr;
            var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

            for (var i = 0; i < data.length; i++) {

                var date = new Date(data[i].CompDt);

                var month = monthNames[date.getMonth()];
                var total = 0;
                var totalamt = data[i].TotalAmt;
                tr = $('<tr/>');
                tr.append("<td>" + month + "</td>");
                tr.append("<td>" + totalamt + "</td>");
                $('#GraphTable').append(tr);
            }

            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total = total + data[i].TotalAmt;
            }
            $('#GraphTable').append('<tr style="font-weight: bold; background-color: white"><td colspan="2" align="right">Total: </td><td>' + total + '</td></tr>');
            tr = $('<tr style="font-weight: bold; background-color: white" />');
            tr.append("<td></td>");
            tr.append("<td></td>");


            $('#GraphTable').append(tr);

        }
        else {

            tr = $('<tr/>');
            tr.append("<th colspan='10' style='text-align:center'>No Data to display</th>");

            $('#GraphTable').append(tr);
        }

    } //end of success
});

Upvotes: 0

Views: 119

Answers (3)

beginner
beginner

Reputation: 303

I have found my solution by:

 var tr;
                    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    var monthsAmt = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

                    for (var i = 0; i < data.length; i++) {
                        var date = new Date(data[i].CompDt);
                        var monthIdx = monthNames[date.getMonth()];

                        switch(monthIdx)
                        {
                            case "Jan": monthsAmt[0] += data[i].TotalAmt;
                                break;

                            case "Feb": monthsAmt[1] += data[i].TotalAmt;
                                break;

                            case "Mar": monthsAmt[2] += data[i].TotalAmt;
                                break;

                            case "Apr": monthsAmt[3] += data[i].TotalAmt;
                                break;

                            case "May": monthsAmt[4] += data[i].TotalAmt;
                                break;

                            case "Jun": monthsAmt[5] += data[i].TotalAmt;
                                break;

                            case "Jul": monthsAmt[6] += data[i].TotalAmt;
                                break;

                            case "Aug": monthsAmt[7] += data[i].TotalAmt;
                                break;

                            case "Sep": monthsAmt[8] += data[i].TotalAmt;
                                break;

                            case "Oct": monthsAmt[9] += data[i].TotalAmt;
                                break;

                            case "Nov": monthsAmt[10] += data[i].TotalAmt;
                                break;

                            case "Dec": monthsAmt[11] += data[i].TotalAmt;
                                break;
                        }

                    }
                    for(var i =0;i<12;i++){
                        if(monthsAmt[i])
                            {
                            tr = $('<tr/>');
                        tr.append("<td>" +monthNames[i] + "</td>");
                        tr.append("<td>" + monthsAmt[i] + "</td>");
                        $('#GraphTable').append(tr);
                    }
                }

Upvotes: 0

Tejinder Singh
Tejinder Singh

Reputation: 1120

this may work:

var result=[];

        success: function (data) {
                if (data.length > 0) {

                    var tr;
                    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

                    for (var i = 0; i < data.length; i++) {
                        var totalAmt=0;
                         if(data[i].CompDt==data[i+1].CompDt)
                         {  
                            totalAmt= data[i].totalamt+data[i+1].totalamt;
                            result.push({'Month':data[i].CompDt, 'TotalAmount':totalAmt})
                         }

            } //end of success
        });

Upvotes: 0

Yogen Darji
Yogen Darji

Reputation: 3300

update below code in success.

success: function (data) {
    if (data.length > 0) {

        var tr;
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        var monthsAmt = [0,0,0,0,0,0,0,0,0,0,0,0];

        for (var i = 0; i < data.length; i++) {
            var date = new Date(data[i].CompDt);
            var monthIdx = monthsAmt[date.getMonth()];
            monthsAmt[monthIdx] += data[i].TotalAmt;
        }

        for(var i =0;i<12;i++){
        if(monthsAmt[i])
            tr = $('<tr/>');
            tr.append("<td>" +monthNames[i] + "</td>");
            tr.append("<td>" + monthsAmt[i] + "</td>");
            $('#GraphTable').append(tr);
          }
        }
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            total = total + data[i].TotalAmt;
        }
        $('#GraphTable').append('<tr style="font-weight: bold; background-color: white"><td colspan="2" align="right">Total: </td><td>' + total + '</td></tr>');
        tr = $('<tr style="font-weight: bold; background-color: white" />');
        tr.append("<td></td>");
        tr.append("<td></td>");


        $('#GraphTable').append(tr);

    }
    else {

        tr = $('<tr/>');
        tr.append("<th colspan='10' style='text-align:center'>No Data to display</th>");

        $('#GraphTable').append(tr);
      }
    } //end of success
});

Upvotes: 1

Related Questions