angular 7 - список уникальных элементов в массиве json - PullRequest
Новая
       10

angular 7 - список уникальных элементов в массиве json

0 голосов
/ 08 мая 2020

У меня есть массив json, как показано ниже, 

 items=[
    {name:"first",subname:"first 1"},
    {name:"first",subname:"first 2"},
    {name:"first",subname:"first 3"},
    {name:"second",subname:"second 1"},
    {name:"second",subname:"second 2"}
    ];

, который я хочу отобразить в виде списка, например, 

first
   first 1
   first 2
   first 3
second
   second 1
   second 2

Хотя я добился этого, поместив две функции в компонент .ts 

getsubname(name){
  return this.items.filter(
      function(data){return data.name == name}
  );
}
getnames(){
  var disname =  this.items.map(item => item.name)
  .filter((value, index, self) => self.indexOf(value) === index)
  return disname
}

и поместите их в HTML, как показано ниже, 

<div>
<mat-list>
    <ng-container *ngFor="let item of getnames()">
        <mat-list-item>{{item}}</mat-list-item>
        <mat-list style="margin-left:30px;">
            <div *ngFor="let subItem of getsubname(item)">
                <mat-list-item >{{ subItem.subname }}</mat-list-item>      
            </div>
        </mat-list>
    </ng-container>
</mat-list>
</div>

Но этот метод выглядит очень наивным. Я уверен, что у меня есть способ сделать это лучше. Пожалуйста, предложите.

1 Ответ

1 голос
/ 08 мая 2020

Вы можете создать функцию для сокращения до объекта, а затем сохранить ее в переменной. 

 values = {};

 getValues (){
   return this.items.reduce((acc , prev) => {
    let ele = prev.name;
     if (!acc[ele]) {
       acc[ele] = [];
     }  
    acc[ele].push(prev.subname);
    return acc;
   }, {});
}


ngOnInit() {
    this.values = this.getValues();
  }

В вашем HTML вы можете выполнять итерацию с конвейером ключевого значения. 

<div>
  <ul *ngFor="let item of values | keyvalue">
    {{ item.key }}
    <li *ngFor='let val of item.value'>
      {{ val }}
    </li>
  </ul>
</div>
...