How to sort items in a list in Angular?

Question

I'm creating an option selector, were you're able to select options for a certain machine. See image with a design of the objects:

Object:

Code:

export class Machine{
    Id: string;
    MachineGroup: MachineGroup;
    Price: number;
    Description: string;
    Image: Image;
    Weight: number;
    Power: number;
    Speed: number;
    Name: string;
    BomId: number;
    Options: Option[];
}

export class Option{
    Id: number;
    Price: number;
    OptionGroup: OptionGroup;
    Description: string;
}

export class OptionGroup{
    Id: number;
    Image: Image;
    Name: string;
}

The options need to be sorted under their OptionGroup, is there some kind of LINQ I can use within Angular?

I mean I can make a function within the component which loops though the list of options and add those objects to a new list to show. But this gave an undefined error, while the component isn't rendered before the Machine is set. The console.log printed the object like it supposed to be. The error is literally: "this is undefined", so I expect the OptionGroup array.

Rendered if machine is set:

<div *ngIf="machine">
    <app-option-selector [inputMachine]="machine"></app-option-selector>
</div>

Component with function:

export class OptionSelectorComponent implements OnInit {

  @Input() inputMachine: Machine;
  options: Option[];
  optionGroups: OptionGroup[];

  constructor() { }

  ngOnInit() {
    this.options = this.inputMachine.Options;
    this.setOptionGroups();

  }

  setOptionGroups(){
    this.options.forEach(function(e){
      console.log(e.OptionGroup);
      this.optionGroups.push(new OptionGroup())
    })
  }
}

So is there an Angular way to create such sorting? Not prone to errors, like I tried to do?

this gave an undefined error,: which has nothing to do with Angular. You're trying to push option groups into this.optionGroups, but you never initialized this.optionGroups, so it's undefined. — JB Nizet
– JB Nizet, Commented Jul 16, 2019 at 6:52
optionGroups: OptionGroup[] = []; is initialization right? But it gives the same error. — Salomé
– Salomé, Commented Jul 16, 2019 at 6:54
I guess you’re in another scope in the forEach loop, so you can’t use this. You should use an arrow function instead inside forEach. — insertusernamehere
– insertusernamehere, Commented Jul 16, 2019 at 6:59

Florian · Accepted Answer · 2019-07-16 07:02:51Z

1

 ngOnInit() {
    this.options = this.inputMachine.Options;
    this.optionGroups = this.setOptionGroups();
  }

setOptionGroups() {
  const optionsCopy = [...options]; // don't mutate options array
  this.optionsCopy.sort((a, b) => (
    // your sort logic
    a.Id - b.Id // example : order by id
  ));
  return optionsCopy.map(option => new OptionGroup() {
    id: option.Id
  });
}

answered Jul 16, 2019 at 7:02

Florian

1,44811 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salomé Over a year ago

What does the map function do in the end?

Florian Over a year ago

Map documentation : it returns a new array. We use it to create an array of OptionGroup from optionsCopy which is an array of Option.

Salomé Over a year ago

Okay thanks for your help and time! I'm going to make a combination of the posts and will make an update with answer to this question by today.

Shubham Dixit · Accepted Answer · 2019-07-16 07:02:12Z

1

You can group by attribute:

arrayToObject(array, keyField) {
    return array.reduce((obj, item) => {
        obj[item[keyField]] = item;
        return obj;
    }, {});
}

Usage:

const groups = this.arrayToObject(this.options, 'OptionGroup');
       this.optionGroups = Object.values(groups);

edited Jul 16, 2019 at 7:02

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

answered Jul 16, 2019 at 6:58

tano

2,8271 gold badge18 silver badges17 bronze badges

1 Comment

Salomé Over a year ago

Thanks for your help and time this is almost the function I needed, I'm going to make a combination of the answer posts and will update the answer by today.

MoxxiManagarm · Accepted Answer · 2019-07-16 09:59:05Z

1

You could use lodash

    const machines: Machine[] = [/*...*/];
    const options: Option[][] = machines.map(machine => machine.options);
    const flatOptions: Option[] = [].concat(...options); // could also use lodash flatten
    const optionGroups: OptionGroup[] = flatOptions.map(option => option.optionGroup); 
    const uniqueOptionGroups: OptionGroup[] = _.uniq(optionGroups); // import * as _ from 'lodash'

And for the sort itself

machines.forEach(machine =>
      machine.options.sort((option1, option2) =>
        // your compare
      );
    );

edited Jul 16, 2019 at 9:59

answered Jul 16, 2019 at 7:23

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

2 Comments

Salomé Over a year ago

Thanks I've read some documentation of Lodash, seems like an interesting library! Definitely going to try it out.

MoxxiManagarm Over a year ago

Yeah it serves some interesting utility. You don't need to to learn it. Just in case you want to write some util functions in your application just check if there is the same util available in lodash. It mostly is.

Collectives™ on Stack Overflow

How to sort items in a list in Angular?

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related