CODEWITHSUNDEEP
angularrxjs
Jeff Benister
Jeff Benister

Reputation: 468

how to filter data from JSON given a property in json array of objects

Sorry about the long post but wanted to make sure I explain myself.

I have the following array

[0 … 99]
0: {option: "Option1", subOption: "subOption11"}
1: {option: "Option1", subOption: "subOption12"}
3: {option: "Option1", subOption: "subOption13"}
4: {option: "Option1", subOption: "subOption14"}
5: {option: "Option1", subOption: "subOption15"}
6: {option: "Option1", subOption: "subOption16"}
7: {option: "Option1", subOption: "subOption17"}
8: {option: "Option1", subOption: "subOption18"}
9: {option: "Option1", subOption: "subOption19"}
10: {option: "Option1", subOption: "subOption110"}
11: {option: "Option2", subOption: "subOption21"}
12: {option: "Option2", subOption: "subOption22"}
13: {option: "Option2", subOption: "subOption23"}
14: {option: "Option2", subOption: "subOption24"}
15: {option: "Option2", subOption: "subOption25"}
16: {option: "Option2", subOption: "subOption26"}
17: {option: "Option2", subOption: "subOption27"}
18: {option: "Option2", subOption: "subOption28"}
19: {option: "Option2", subOption: "subOption29"}
20: {option: "Option2", subOption: "subOption220"}
...
...
...

Service call:

  getOptions(): Observable<Options[]> {
    const url = `https://localhost:5001/api/options/`;
    return this.http.get<Options[]>(url);
  }

Using the code the following way in component.ts file. This code returns me the distinct options

  getDistinctOptions() {
    const items$ = this.optionsService.getOptions();
    items$.pipe(
        switchMap((results) => results.map((x) => x.option)),
        distinct()
      )
      .subscribe((res) => {
        this.optionsArray = [...this.optionsArray, res];
      });     
  }

My aim is to do the following: Get distinct options and subOptions related to those distinct options and run loop through to generate the components the following way

 <option-component *ngFor="let i of options">
  <test-accordion-component [option]="i">
     <test-sub-component [subOption]="j" *ngFor="let j of subOptions"></test-sub-component>
  </test-accordion-component>
 </option-component>

I have been working on this for quite a while but have not been able to reach a solution. If someone could please guide me in the right direction on how I can get subSections based on options and then use them to loop through and generate components. I am very new to learning RxJs and running into quite a few roadblocks.

Thanks for all the help !

Upvotes: 1

Views: 258

Answers (2)

Mark van Straten
Mark van Straten

Reputation: 9425

You might be able to use a .groupBy to have your array of options be grouped again into Array<Option[]>

based on https://www.learnrxjs.io/learn-rxjs/operators/transformation/groupby

getOptions(): Observable<Options[]> {
  const url = `https://localhost:5001/api/options/`;
  return this.http.get<Options[]>(url);
}

getOptions().pipe(
  groupBy(option => option.subOption),
  mergeMap(group => group.pipe(toArray())) // get the grouped items back as array
)

Upvotes: 1

Jeff Benister
Jeff Benister

Reputation: 468

I found a solution and it works but looking for more solutions

declare a new object

test = {};

group by items

const items$ = this.optionsService.getOptions();
items$.pipe().subscribe((res) => {
  for (const { option, option} of res) {
    if (!this.test[option]) this.test[option] = [];
    this.test[option].push({ option, option});
  }
});

Upvotes: 1

Related Questions