Dynami c Сгруппированный список флажков по отношению к метке

Question

У меня есть массив, например,

Data: Array<any> = [
    { name: 'Pear', value: 'pear' ,label : Fruit},
    { name: 'Plum', value: 'plum' , label : Fruit},
    { name: 'Kiwi', value: 'kiwi' , label : Fruit},
    { name: 'Brinjal', value: 'Brinjal' ,label : Vegetable},
    { name: 'Cabbage', value: 'Cabbage' ,label : Vegetable}
  ];

Я хочу отобразить это как

Label - Vegetable
Checbox 1 = brinjal , Checkbox 2 = Cabbage 

(флажок будет действительным)

Label - Fruit
Checbox 1 = Pear, Checkbox 2 = Plum ,Checkbox 3 = kiwi

или такой массив

{
   "label1":{
      "checkboxname":"value",
      "checkboxname":"value"
   },
   "label2":{
      "checkboxname":"value"
   }
}

как мне это сделать в Angular или Javascript?

Answer 1

Вы можете использовать .reduce() для сортировки массива по значению метки

myArray = this.data.reduce(function (r, a) {
    r[a.label] = r[a.label] || [];
    r[a.label].push(a);
    return r;
}, Object.create(null));

, а затем вы можете создать список таких флажков:

<label *ngFor="let checkboxes of sortedCheckboxes | keyvalue">
    {{checkboxes.key}}<br/>
    <label *ngFor="let checkbox of sortedCheckboxes[checkboxes.key]"> 
      <input type="checkbox" value="{{checkbox.value}}" /> {{checkbox.name}}
    </label>
  <br><br>
</label>

Вот стекблиц