Фильтр JSON в Angular 5+ с запросом - PullRequest
0 голосов
/ 01 мая 2018

У меня есть вопрос об отображении моего результата ngFor продолжает жаловаться, что это не массив. Я пытался преобразовать в массив, но ничего не помогает.

Мой код:

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]

Цель состоит в том, чтобы сопоставить de searchQuery с json с сервера. Таким образом, можно достичь нескольких результатов. В этом примере мы хотим, чтобы все пользователи были активны и соответствовали всему городу по 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 голосов
/ 07 мая 2018

Я решил проблему, итерация по наблюдаемой не была хорошей идеей, поэтому я просто отфильтровал ее как обычный массив, и это решило мою проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...