2017-02-13 3 views
0

Я звоню в службу и возвращаю объект json. Я хотел бы отфильтровать результаты, но не могу заставить его работать. Запрос работает отлично, и я передаю ключевое слово, используя функцию фильтра. Я попытался отключить его, но он возвращает пустой массив.угловые2, наблюдаемые результаты фильтра RxJs?

Благодарим заранее.

let keywords = 'defunkt'; 

this.http.get('https://api.github.com/users') 
    .map((res: Response) => res.json()) 
    .subscribe(
    data => { 
     this.result = data, 
     console.log(this.result.filter((keyword, index) => keywords.lastIndexOf(keyword) === index)); 
    }, 
    err => console.error(err), 
    () => console.log('done') 
); 
+1

Вы можете описать на английском языке - а не в коде - что вы ожидаете от своего фильтра? Вы хотите найти пользователей с определенным ключевым словом в своем профиле? – AngularChef

+0

Привет, Я хочу, чтобы иметь возможность искать объект. Например, в конечной точке я нажимаю выше. У всех пользователей github есть логин. Я хотел бы перейти в строку поиска, как только у меня есть объект, и на этом будет возвращен другой массив. В приведенном выше коде в качестве теста я попытался передать ключевое слово для фильтрации, но я предполагаю, что мне, возможно, придется сгладить массив или что-то в этом роде. – Jimi

+0

Получил это. Я представил ответ ниже. – AngularChef

ответ

0

Вот это сервис, который позволит вам искать пользователей GitHub их логин:

@Injectable() 
export class GithubSearchService { 

    constructor(private http: Http) { } 

    byLogin(query: string): Observable<any> { 
    return this.http.get('https://api.github.com/users') 
     .map(resp => resp.json()) 
     .mergeMap(val => val) // <!-- this is important 
     .filter((user: any) => user.login.includes(query)); 
    } 

} 

И теперь код потребляя эту услугу:

export class AppComponent { 

    constructor(private search: GithubSearchService) { } 

    ngOnInit() { 
    this.search.byLogin('van') 
     .subscribe(results => console.log(results)); 
    } 

} 

Несколько замечаний:

  • В этой реализации фильтрация d один на клиенте. Это означает, что вы не просматриваете ВСЕ пользователей Github, а только через пользователей, возвращаемых вызовом API (кажется, 30 пользователей по умолчанию). API Github, вероятно, принимает параметры, которые позволяют выполнять фильтрацию на сервере.
  • Обратите внимание на использование оператора mergeMap(). Это позволяет мне сгладить массив пользователей, возвращаемых API, и каждый пользователь излучается как отдельное индивидуальное значение в наблюдаемом. Я сделал это, чтобы я мог манипулировать (и фильтровать) каждого пользователя отдельно с другими операторами RxJS вместо того, чтобы иметь дело с массивом пользователей.
  • Я использовал String.prototype.includes(), чтобы проверить, если пользовательский логин содержит данный поиск (поиск с учетом регистра). Поскольку эта часть является чистой JS, вы можете легко ее адаптировать для фильтрации по другим критериям.
+0

Hi @AngularFrance. Это здорово и спасибо, что ответили на этот вопрос. Но я хочу фильтровать результаты вне службы, поскольку у меня есть результаты, хранящиеся в магазине redux. Я продолжаю возвращаться не определенно, но это не ... console.log ("///", this.myStore.select ('mykey') .subscribe (state => console.log (state) )); – Jimi

+0

Hi Jimi. Трудно помочь вам на основе небольшого фрагмента кода, который вы предоставили. Не могли бы вы предоставить Plunkr? – AngularChef

Смежные вопросы