1

I am using AngularJS to group all subdocuments of array. it is able to group only the first item of the subdocument and gives the length how do i get the count of its proper length. My plunk link.

the result i am getting now is

Isnain Meals - 1

Chicken Burger - 2

the expected result

Isnain Meals - 2

Chicken Burger - 2

HTML

<body ng-controller="MainCtrl">
    <div ng-repeat="(key, data) in groupedByFoodName">
      <p>{{key}} - {{data.length}}</p>
    </div>
</body>

Controller JS

$scope.groupedByFoodName=  _.groupBy($scope.lists, function (each) { return each.orderfood[0].name });

JSON

  $scope.lists = [
{
  "_id": "56b0c315e179bb0e00a44dbf",
  "orderfood": [
    {
      "_id": "569d865bff1fe20e00f8ba97",
      "qty": "1",
      "confirm": true,
      "price": 154,
      "name": "Isnain Meals"
    },
    {
      "_id": "569d865bff1fe20e00f8ba98",
      "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"
}];
Rohit Vinay
  • 665
  • 7
  • 38

1 Answers1

1

Try this

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

You are not quite right _.groupBy written, it returns only the first name of the array orderfood.

Live example on jsfiddle.

<form name="ExampleForm" id="ExampleForm">
  <div ng-repeat="(key, data) in groupedByFoodName">
    <p>{{key}} - {{data.length}}</p>
  </div>
</form>

And JS:

    $scope.lists = [{
  "_id": "56b0c315e179bb0e00a44dbf",
  "orderfood": [{
    "_id": "569d865bff1fe20e00f8ba97",
    "qty": "1",
    "confirm": true,
    "price": 154,
    "name": "Isnain Meals"
  }, {
    "_id": "569d865bff1fe20e00f8ba98",
    "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"
}];

$scope.groupedByFoodName = _.chain($scope.lists).map(function(each) {
  return each.orderfood
}).flatten().groupBy(function(each) {
  return each.name
}).value();
Stepan Kasyanenko
  • 3,176
  • 1
  • 15
  • 23
  • I does not work correctly. it comes something like this [plunk](https://plnkr.co/edit/YOozaY2Ur0ybRLBKCx2K?p=preview). it fetches all data in console but does display as result in browser – Rohit Vinay Feb 05 '16 at 18:04
  • Of course, the result will not be displayed in the browser in html. Because you have been incorrectly written expression `_.groupBy`. Naturally, that the result is displayed in the browser, it is necessary to write the appropriate code on `html`. – Stepan Kasyanenko Feb 08 '16 at 04:17
  • can you please point it out on the plunk i gave in the comment?thank you – Rohit Vinay Feb 08 '16 at 05:46
  • Plunk is not work in chrome because `ERR_SSL_VERSION_OR_CIPHER_MISMATCH`. But i create https://jsfiddle.net/Stepan_Kasyanenko/fduto9e4/ for you. It doing exactly what you need. – Stepan Kasyanenko Feb 08 '16 at 05:59