Grouping Elements in angularjs or javascript

Question

I want to use month as the column, location as the row header and then the center item is as value. but unable to make it. I want to make a matrix form table, like below: my Json is as below:

//Output is as below....{ "QATAR": 464785, "UAE": 223428, "SAUDI ARABIA": 355212 }
$scope.resArray = [{
    "Month": "January-2016",
    "Year": "2016",
    "Value": 26000,
    "Location": "QATAR"
  },
  {
    "Month": "January-2016",
    "Year": "2016",
    "Value": 0,
    "Location": "QATAR"
  },
  {
    "Month": "January-2016",
    "Year": "2016",
    "Value": 8700,
    "Location": "UAE"
  },
  {
    "Month": "January-2016",
    "Year": "2016",
    "Value": 311912,
    "Location": "SAUDI ARABIA"
  },{"Month": "January-2016","Year": "2016","Value": 15300,"Location":SAUDI ARABIA"},{"Month": "January-2016","Year": "2016","Value": 3000,"Location": "QATAR"},{"Month": "January-2016","Year": "2016","Value": 2500,"Location": "QATAR"},{"Month": "January-2016","Year": "2016","Value": 2300,"Location": "UAE"
  }]var groupedData = {};$scope.resArray.forEach(function(item) {var Location = item.Location;var value = item.Value;if (groupedData.hasOwnProperty(Location)) {groupedData[Location] += value;
  } else {groupedData[Location] = value;}});

**Please see the plunker PlunkerLink

create a working plunker so that we can get what is the issue actually. — xkeshav
– xkeshav, Commented May 1, 2017 at 8:57
pro.mean, I have no idea about creating the plunker, can we discuss here itself — Scavenger
– Scavenger, Commented May 1, 2017 at 8:58
open plnkr.co and click to launch the editor and paste the relevant HTML, CSS and JS code there. you can add the angularJS within it from Popular packages tab — xkeshav
– xkeshav, Commented May 1, 2017 at 8:59
pro.mean, Ok Just give me a minute I will prepare then msg you. be there please. — Scavenger
– Scavenger, Commented May 1, 2017 at 9:05

Nina Scholz · Accepted Answer · 2017-05-01 12:50:50Z

First of all I suggest to use more than one object for grouping, one for grouping by Month and Location and another one for collection groups specific totals, like for the before mentioned groups and a total value. This is necessary to calculate the percent values, later.

In the result table, you could address the grouped values by taking row and column name for the result.

var $scope = { resArray: [{ Month: "January-2016", Year: "2016", Value: 26000, Location: "QATAR" }, { Month: "January-2016", Year: "2016", Value: 0, Location: "QATAR" }, { Month: "January-2016", Year: "2016", Value: 8700, Location: "UAE" }, { Month: "January-2016", Year: "2016", Value: 311912, Location: "SAUDI ARABIA" }, { Month: "January-2016", Year: "2016", Value: 15300, Location: "SAUDI ARABIA" }, { Month: "January-2016", Year: "2016", Value: 3000, Location: "QATAR" }, { Month: "January-2016", Year: "2016", Value: 2500, Location: "QATAR" }, { Month: "January-2016", Year: "2016", Value: 2300, Location: "UAE" }] },
    grouped = {},
    total = { total: 0 };

$scope.resArray.forEach(function (item) {
    grouped[item.Month] = grouped[item.Month] || {};
    grouped[item.Month][item.Location] = (grouped[item.Month][item.Location] || 0) + item.Value;
    ['Month', 'Location'].forEach(function (key) {
        total[key] = total[key] || {};
        total[key][item[key]] = (total[key][item[key]] || 0) + item.Value;
    });
    total.total += item.Value;
});

console.log(grouped);
console.log(total);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

Grouping Elements in angularjs or javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related