What is the best method for showcasing organized data with select and optgroup in Angular?

Question

What is the best method for showcasing organized data with select and optgroup in Angular?

Searching for a way to create a grouped dropdown select using Angular? In this case, the group is based on the make property.

const cars = [{
        make: "audi",
        model: "r8",
        year: "2012"
    },
    {
        make: "audi",
        model: "rs5",
        year: "2013"
    },
    {
        make: "ford",
        model: "mustang",
        year: "2012"
    },
    {
        make: "ford",
        model: "fusion",
        year: "2015"
    },
    {
        make: "kia",
        model: "optima",
        year: "2012"
    }
];

Expecting the dropdown select options to be grouped as follows:

audi
- r8
- rs5
ford
- mustang
- fusion
kia
- optima

Contemplating whether to transform the object before or explore other alternatives. Considered this approach: https://medium.com/@edisondevadoss/javascript-group-an-array-of-objects-by-key-afc85c35d07e

Alternatively, stumbled upon this solution: https://stackblitz.com/edit/angular-optgroup. However, note that the object structure differs.

angular typescript

Answer 1

Answer №1

If you want to display the data in a certain way, it's best to transform the object beforehand. This approach is also suggested in a similar medium article.

Looking at the stackblitz example, it's clear that the main name is key to grouping the data.

By transforming the data, you can have ngFor display group1, its opt-groups, group2, and their children sequentially. This method makes the most sense in my opinion.

UPDATED

In your stackblitz example (the one shared above), the code would look something like this:

https://i.sstatic.net/kGGuf.png

<select name="cars" id="cars">
  <optgroup *ngFor="let item of optGroups" label="{{item.name}}" >
    <option *ngFor="let sub of item.data" value="{{sub.value}}"> 
      {{sub.text}} 
    </option>
  </optgroup>
</select>

Utilizing ngFor on optgroup and option elements.

You can obtain the transformed response with this snippet:

let group = this.cars.reduce((r, a) => {
  console.log("a", a);
  console.log('r', r);
  r[a.make] = [...r[a.make] || [], a];
  return r;
}, []);

This will give you the desired transformed response - an Array of makes, each containing a number of items.

Refer to the image below where I have already implemented this approach. You can then use ngFor as described above.

https://i.sstatic.net/mEEzM.png

Answer 2

If you want to display the data in a certain way, it's best to transform the object beforehand. This approach is also suggested in a similar medium article.

Looking at the stackblitz example, it's clear that the main name is key to grouping the data.

By transforming the data, you can have ngFor display group1, its opt-groups, group2, and their children sequentially. This method makes the most sense in my opinion.

UPDATED

In your stackblitz example (the one shared above), the code would look something like this:

https://i.sstatic.net/kGGuf.png

<select name="cars" id="cars">
  <optgroup *ngFor="let item of optGroups" label="{{item.name}}" >
    <option *ngFor="let sub of item.data" value="{{sub.value}}"> 
      {{sub.text}} 
    </option>
  </optgroup>
</select>

Utilizing ngFor on optgroup and option elements.

You can obtain the transformed response with this snippet:

let group = this.cars.reduce((r, a) => {
  console.log("a", a);
  console.log('r', r);
  r[a.make] = [...r[a.make] || [], a];
  return r;
}, []);

This will give you the desired transformed response - an Array of makes, each containing a number of items.

Refer to the image below where I have already implemented this approach. You can then use ngFor as described above.

https://i.sstatic.net/mEEzM.png

What is the best method for showcasing organized data with select and optgroup in Angular?

Answer №1

Similar questions

Error: The lockfile and package.json file are not synchronized when running npm

Tips for resolving package conflicts while integrating Wagmi View into a React/Typescript application

Expanding unfamiliar categories

What could be causing the TypeScript class property to be undefined?

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

Introduce AngularJS version 2 for better web development

Having trouble determining whether a modal is currently open in an Angular application?

Ways to retrieve the quantity of a particular value within an object using TypeScript

Transferring information between components within AngularJS

Discovering the number of items that have been filtered in isotope-layout using React and Typescript

The filter() and some() functions are not producing the anticipated output

The ngOnChanges lifecycle hook is triggered only once upon initial rendering

Transferring information using TypeScript

I am interested in incorporating a personalized class into the Kendo UI for Angular TabStrip

When reloading the page with query parameters, the Angular URL is dynamically altered

Create a custom sorting pipe in Angular 10 that allows for a specific value hierarchy to be passed, without adhering

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Clicking on an element- how can I find the nearest element?

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

Unable to invoke an external function from bolt Response Handler Callback