在给定对象json数组中的属性的情况下，如何从JSON过滤数据 [英] 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.

我有以下数组

[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"}
...
...
...

服务电话:

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

在component.ts文件中以以下方式使用代码.这段代码为我返回了不同的 options

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

我的目标是执行以下操作:获取与这些不同选项相关的不同选项和subOption，并通过以下方式循环运行以生成组件

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>

我已经为此工作了很长时间，但未能找到解决方案.如果有人可以引导我正确地指导我如何基于 options 获取 subSections ，然后使用它们遍历并生成组件.我对学习RxJ并遇到许多障碍非常陌生.

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.

感谢所有帮助！

推荐答案

您也许可以使用 .groupBy 将选项数组再次分组为 Array< Option []>

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

基于 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
)

这篇关于在给定对象json数组中的属性的情况下，如何从JSON过滤数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！