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

Question

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 !

Can you restructure your json? Would be better to just have 1 top level option object for each and then list the children underneath them. — abney317
– abney317, Commented Oct 19, 2020 at 22:50
That would be ideal but I want to stick to this example for right now. I am trying to build something that will have similar structure (not coming from me) so I kinda need to stick to this format. — Jeff Benister
– Jeff Benister, Commented Oct 19, 2020 at 23:16

Jeff Benister · Accepted Answer · 2020-10-20 02:09:13Z

1

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});
  }
});

answered Oct 20, 2020 at 2:09

Jeff Benister

4683 silver badges12 bronze badges

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

Comments

Mark van Straten · Accepted Answer · 2020-10-20 08:26:19Z

1

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
)

answered Oct 20, 2020 at 8:26

Mark van Straten

9,4553 gold badges41 silver badges57 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related