Фильтр JSON в Angular 5+ с запросом

У меня вопрос об отображении моего результата. 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]

Цель состоит в том, чтобы сопоставить поисковый запрос с 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.info(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 бесполезен для этого примера, но я поместил его здесь, чтобы вы имели представление о том, как я строю запрос.

Возможно, вся установка неправильная, поэтому любые советы приветствуются. Спасибо!

Итак, что вы хотите повторить, когда он жалуется, что это не массив?

martin 01.05.2018 16:52

какие поля вы используете в ngFor?

Plochie 01.05.2018 17:05
Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
0
2
99
1

Ответы 1

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

Спасибо всем за вашу помощь и время

Frank Anneveld 07.05.2018 15:07

Другие вопросы по теме