Argthtjtr

I have data like this:

Initial data:

var input = [

    {ru: "R201", area: "211", unit: "211"},

    {ru: "R201", area: "212", unit: "NONE"},

    {ru: "R201", area: "HCC", unit: "NONE"}];

Result data:

var result = [

    {area: ["211", "212", "HCC"],

    ru: "R201",

    unit: ["211", "NONE"]}];

I want to looping these data into template using ngFor, after some researches I'm getting stuck at this problem, cannot find a differ supporting object 'R201' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Here is my function:

  this.groupBy = _

  .chain(input)

  .groupBy('ru')

  .map(function(value, key) {

      return {

          ru: key,

          area: _.uniq(_.pluck(value, 'area')),

          unit: _.uniq(_.pluck(value, 'unit'))

      }

  })

  .value();

And here is my template:

<ion-list no-lines class="menus">

  <ion-item ion-item *ngFor="let p of groupBy; let i=index" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+1)}">

    <ion-row>

      <ion-col col-9>

        <span ion-text>

          <strong>{{ p.ru }}</strong>

          <ion-icon [name]="isLevel1Shown('idx'+i) ? 'arrow-dropdown' : 'arrow-dropright'" float-right></ion-icon>

        </span>



        <ion-list no-lines *ngIf="isLevel1Shown('idx'+i)">

          <ion-item no-border *ngFor="let menu of p.ru; let i2=index" text-wrap (click)="toggleLevel2('idx'+i+'idx'+i2)" [ngClass]="{active: isLevel2Shown('idx'+i+'idx'+i2)}"><br>

            <span ion-text>

              <strong>&nbsp;{{ menu.area }}</strong>

              <ion-icon [name]="isLevel2Shown('idx'+i+'idx'+i2) ? 'arrow-dropdown' : 'arrow-dropright'" float-right></ion-icon>

            </span>



            <ion-list no-lines *ngIf="isLevel2Shown('idx'+i+'idx'+i2)">

              <ion-item no-border text-wrap><br>

                <span ion-text (click)="openEquipmentPage(p.dataRu,menu.area,menu.unit)">

                  &nbsp;{{ menu.unit }}

                </span>

              </ion-item>

            </ion-list>

          </ion-item>

        </ion-list>

      </ion-col>

    </ion-row>

  </ion-item>

</ion-list>

Maybe someone could help me, thank you in advance.

You can manipulate your result according to this.

var grd = .chain(input)

 .groupBy('ru')

 .map(function(value, key) {

  return {

      ru: key,

       area: _.uniq(_.pluck(value, 'area')),

       unit: _.uniq(_.pluck(value, 'unit'))

     }

   }).value();



this.groupBy = ;



for(let key in grd){

   groupby.push({key: key, values:grd[key]});

}