How to Group ng-repeat subdocuments?

Question

I am using AngularJS, where i have SubDocuments and my JSON comes like below. I would like to know how do i group my subdocuments(list inside orderfood). my plunker link. the result i am getting now is.

Isnain Meals

Chicken Burger

Chicken Burger

but i would like my result like this

Isnain Meals

Chicken Burger(2)

The JSON data

$scope.lists = [
{
  "_id": "56b0c315e179bb0e00a44dbf",
  "orderfood": [
    {
      "_id": "569d865bff1fe20e00f8ba97",
      "qty": "1",
      "confirm": true,
      "price": 154,
      "name": "Isnain Meals"
    }
  ],
  "content": "9176649143",
  "created": "2016-02-02T14:54:13.926Z"
},
{
  "_id": "56b06ed25b53250e00ccbd73",
  "orderfood": [
    {
      "_id": "569d84f04834c10e003dff36",
      "qty": "1",
      "confirm": true,
      "price": 125,
      "name": "Chicken Burger"
    }
  ],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
},
{
  "_id": "56b06ed25b53250e00ccbd74",
  "orderfood": [
    {
      "_id": "569d84f04834c10e003dff37",
      "qty": "1",
      "confirm": true,
      "price": 125,
      "name": "Chicken Burger"
    }
  ],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
}];

my plunker link

need to map the data in service or controller before passing to view — charlietfl, Feb 03 '16 at 05:07
tried to separate it, it did not work.. [plunk](https://plnkr.co/edit/tVwV7hmVtZzEVYDKdMc6?p=preview) — Rohit Vinay, Feb 03 '16 at 05:33

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

You can use the filter "groupBy"

<div ng-repeat="(key, value) in lists | groupBy: 'name'">
   {{key}} ({{value.length}})
</div>

value is the list of grouped data.

see related question: How can I group data with an Angular filter?

edited May 23 '17 at 11:50

Community

1
1

answered Feb 03 '16 at 09:11

pdem

3,880
1
24
38

score 0 · Accepted Answer · answered Feb 08 '16 at 15:11

0

I used lodash to group the subdocuments

$scope.groupedByFoodName = _.chain($scope.lists).map(function(each) {
  return each.orderfood
}).flatten().groupBy(function(each) {
  return each.name
}).value();

demo

answered Feb 08 '16 at 15:11

Rohit Vinay

665
7
38

How to Group ng-repeat subdocuments?

2 Answers2