Angular2, наблюдаемая услуга, которая является лучшей практикой

Question

У меня есть сервис, который должен вызывать HTTP, чтобы получить данные, обрабатывать эти данные и возвращает преобразованные данные в наблюдаемом

_callHttp(): Observable<Array<element>> { 
    return this._http.get(this._Url).map(res => this._extractData(res)); 
} 

_extractData(res): element[] { 
     return res.json().map(t => new element().fromJson(t)); 
} 


getOrganigramByName(name, language): Observable<element[]> { 
    let list = new Array<element>(); 
    this._callHttp().subscribe(res=> list.push(res)); 
    let filteredList: Array<element> = this.filterList(list,name, language); 
    return Observable.of(filteredList); 
} 


filterList(list,name,language):Array<element>{ 
    let result : new Array<element>(); 
    list.forEach(res => { 
    if (res.name==="albert"){ 
     result.push(res); 
    } 
    }) 
    return result 

}

В методе filterList , список пуст Я не хочу включать метод filterList в подписи

Каков наилучший способ сделать это?

Answer 1

Вы проблема в том, что Наблюдаемые являются асинхронными.

let list = new Array<element>(); 

this._callHttp().subscribe(res=> { 
    // This will happened sometimes in the futur, maybe in 5 seconds. 
    list.push(res); 
}); 

// But this will happened instantly, so list is still an empty array 
let filteredList: Array<element> = this.filterList(list,name, language); 

return Observable.of(filteredList); 

Таким образом, вы не можете ожидать list быть что-нибудь еще Тана пустой массив к тому времени вы называете this.filterList.

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

getOrganigramByName(name, language): Observable<element[]> { 
    return this._callHttp().map(list => { 
     return this.filterList(list, name, language); 
    }); 
} 

filterList(list:element[], name, language):element[]{ 
    return list.filter(elem => { 
    return elem.name === 'albert'; 
    }); 
} 

Я имитирую вашу проблему на plunker.

My _callHttp - это просто симуляция вашего запроса http и разбора json.

_callHttp(): Observable<element[]> { 
    return Observable.of([{name:'bob'}, {name:'john'}, {name:'albert'}]); 
}