使用查询过滤Angular 5+中的JSON

时间:2018-05-01 14:49:37

标签: json angular rxjs

我有一个关于显示我的结果的问题ng为了不断抱怨它不是一个数组。我试图转换为数组,但没有任何帮助。

我的代码:

searchQuery: any = {
user: {active: true},
cities: ['e991a8ee-e182-4ef7-82e2-142a3da4aec9', '2c01ea98-b545-4271-a69b-201962e4fb2f'],
ageGroup: ['3c7baa61-1e69-4c9b-9525-516c20cd4f56','56aa97f1-e51e-4347-8378-42569417c5a5'],
transportType: 0,
gender: 'c7122a10-d776-4789-859e-54b93fc26801'};

如果未选择任何内容,或者我们要搜索transportType而不是搜索查询包含transportType,则搜索查询可以为空。但是如果我们想要搜索那些可以是更多的项目。 从服务器我们收到一个包含大量对象的json数组。 (+/- 15000个对象)

[{
        "id": "39d8c55a-e2d9-4ae5-b839-ff8aca4ec153",
        "user": {
            "active": false
        },
        "registered": {
            "status": 0,
            "date": "Tue May 01 2018 08:27:14 GMT+0000 (UTC)"
        },
        "cities": [{
                "id": "e991a8ee-e182-4ef7-82e2-142a3da4aec9",
                "label": "City A"
            }, {
                "id": "a4b20264-8038-405c-8ec0-8efcd0aa5f8f",
                "label": "City B"
            }, {
                "id": "e991a8ee-e182-4ef7-82e2-142a3da4aec9",
                "label": "City C"
            }
        ],
        "tasks": 10,
        "transportType": 2,
        "fullname": "John Doe",
        "gender": {
            "label": "male",
            "id": "c7122a10-d776-4789-859e-54b93fc26801"
        },
        "ageGroup": {
            "id": "3c7baa61-1e69-4c9b-9525-516c20cd4f56",
            "label": "27 t/m 34"
        }
    }, {
        "id": "c1597b80-9115-4ae6-a13c-06602a274e64",
        "user": {
            "active": true
        }
    }, {
        ....
    }
    ...etc]

目标是将来自服务器的json再次匹配de searchQuery。因此可以实现多个结果。 在这个例子中,我们想要所有活跃的用户,并通过uuid和2个年龄组等匹配所有城市......(一切都必须匹配) 在我的代码中,有一个可观察的查询和服务器响应以及过滤结果作为Angular中的服务。

@Injectable() export class SearchService {

  private searchQueryInit: any = {
    user: {active: true},
    cities: ['e991a8ee-e182-4ef7-82e2-142a3da4aec9', '2c01ea98-b545-4271-a69b-201962e4fb2f'],
    ageGroup: ['3c7baa61-1e69-4c9b-9525-516c20cd4f56','56aa97f1-e51e-4347-8378-42569417c5a5'],
    transportType: 0,
    gender: 'c7122a10-d776-4789-859e-54b93fc26801'   };

  private query: BehaviorSubject<any> = new BehaviorSubject<any>(searchQueryInit);   private query$: Observable<any>;   readonly result$: Observable<any>;   private entities$: Observable<any>;

  constructor(private store: Store<fromStore.AppState>) {
    store.dispatch(new storeActions.LoadEntities()); // call the store 
    this.entities$ = this.store.select(fromStore.getAllEntities); // load the entities
    this.query$ = this.query.asObservable().debounceTime(200);
    this.result$ = this.searchEntities();   }

  searchEntities(): Observable<any> {
     return this.query$.switchMap(
       (query) => {
         console.log(query);
         return entities$.pipe(
           mergeMap( (y: any) => y),
           filter((t: any) => t.transportType === 2), // refactor to multiple search items
        );
      }
     );   }

  get entities(): Observable<any> {
    return this.result$;   }

  set searchQuery(search: {field, query}) {
    // field: string, query: string
    const v = this.query.getValue();
    const next = (search.query) ? {...v, [search.field]: search.query} : {...v, [search.field]: null};
    this.query.next(next);   }

}

searchQuery对这个例子没用,但我把它放在这里,这样你就可以了解我如何构建查询。

也许整个设置不是正确的方式,所以欢迎任何建议。 谢谢!

1 个答案:

答案 0 :(得分:0)

我解决了这个问题,对一个observable进行迭代并不是一个好主意,所以我只是作为一个普通的数组进行过滤,这解决了我的问题。