Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Rxjs problem z funckją map()

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Rxjs problem z funckją map()

Post 20.02.2018, 14:06:45

Czesc,

Szybkie pytanie:

Kod: Zaznacz cały
const source = Rx.Observable.from( [ [{name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}] ] );

//zostaje nam zwrocona lista obiektow
const example = source.map(newArr => newArr );

//ponizej powinny byc juz konkretne obiekty pod anotherArr, a otrzymuje tę samą listę co wyżej
example.map(anotherArr=> anotherArr);
const subscribe = example.subscribe(val => console.log(val));


Problem w tym, że drugi map() zwraca to samo co pierwszy, a nie poszczegolne obiekty. Czy moze ktos mi wytlumaczyc dlaczego?

Dzięki i pozdrawiam!
whitty
Posty: 106
Dołączył(a): 12.07.2015

Re: Rxjs problem z funckją map()

Post 20.02.2018, 15:25:05

Na starcie utworzyłeś obiekt Observable, który kiedyś zwróci jedną wartość - tablicę. Jest tak, ponieważ na wejściu podałeś tablicę z jednym elementem (tablicą).
.map() jest operacją służącą do utworzenia nowej kolekcji oferującą możliwość "przetłumaczenia" każdej wartości kolekcji na inną wartość. Ty masz w kolekcji jedną wartość. Tłumaczysz ją na samą siebie (wartość => wartość). Więc example będzie obiekem Observable, który też zwróci jedną wartość - tablicę.
Drugi map robi to samo (przy czym nawet nie zapisujesz nigdzie wyniku, więc jest stracony).
Ostatecznie subskrybując się do wartości z Observable, dostaniesz 1 wynik - tablicę obiektów.

Jeśli oczekiwałeś na wyjściu 3 wywołań console.log() z poszczególnymi obiektami, to powinieneś zmienić pierwszy .map() na .concatMap()

Kod: Zaznacz cały
const source = Rx.Observable.from( [ [{name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}] ] );
const example = source.concatMap((v) => Rx.Observable.from(v))); // krótko można zapisać source.concatMap((v) => v))
const subscribe = example.subscribe(val => console.log(val));

(lub na kilka innych, mniej lub bardziej eleganckich) sposobów)
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19770
Dołączył(a): 14.04.2002

Re: Rxjs problem z funckją map()

Post 20.02.2018, 17:07:20

Dzięki za odpowiedź Kuku.
Czyli mozna tez powiedziec, ze tradycyjna metoda map dostępna na obiekcie Array dziala inaczej tak?
Bo kiedy ją wywołam na tablicy, przeiteruje po każdym obiekcie.
Nie jestem pewien do końca gdzie się gubię. Rozumiałem to tak, że pierwszy map rzeczywiscie widzi tylko jeden element w tablicy (tablice obiektow), ale nastepny map na observable zadziala tak jak bym po prostu zrobil:

Kod: Zaznacz cały
const source = Rx.Observable.from([{name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}]);
source .map(elem => elem);


Czyli jak zachowuje sie z takim przypadku concatMap()?
whitty
Posty: 106
Dołączył(a): 12.07.2015

Re: Rxjs problem z funckją map()

Post 20.02.2018, 22:00:32

Czyli mozna tez powiedziec, ze tradycyjna metoda map dostępna na obiekcie Array dziala inaczej tak?

nie, Array.map i Observable.map działają praktycznie tak samo. Różnica między obydwoma polega tylko na tym, że Array ma dane od razu, Observable obiecuje, że jakieś dane będą dostępne w dowolnym czasie, ale to w naszej analizie akurat nieważny detal.

Ponowne użycie .map również iteruje po każdym elemencie kolekcji, nie ma żadnych zmian. Po pierwszym .map() kolekcja nadal jest jedno-elementowa (gdzie jedynym elementem jest tablica obiektów).
concatMap działa w taki sposób, że przerabia każdy z elementów naszego Observable na Observable (czyli nasza zagnieżdżona tablica zostaje jakby przepuszczona przez Rx.Observable.from(zagnieżdżona_tablica)) i wszystkie utworzone Observable zostają połączone w jeden Observable i ten jeden Observable zostaje zwrócony.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19770
Dołączył(a): 14.04.2002

Re: Rxjs problem z funckją map()

Post 21.02.2018, 09:23:14

Dziękuję za odpowiedź Kuku!

Rozumiem. Po prostu uważałem, że za drugim podejściem mamy juz kolekcję skladającą sie z 3 elementów, nie z jednego.

Pozdrawiam!
whitty
Posty: 106
Dołączył(a): 12.07.2015

Re: Rxjs problem z funckją map()

Post 22.02.2018, 11:07:23

Czesc,

Nie chciałem zakładac osobnego tematu, nie wiem czy to dobrze, czy źle.
Mam jeszcze jedno pytanie dot. rxjs i prosiłbym o pomoc.

Chodzi mi o dzialanie merge oraz mergeAll.

Mam 2 przykłady:

merge

Kod: Zaznacz cały
var timer1 = Rx.Observable.interval(1000).take(6);
var timer2 = Rx.Observable.interval(1000).take(6);
var merged = Rx.Observable.merge(timer1, timer2);
merged.subscribe(x => console.log(x));


mergeAll

Kod: Zaznacz cały
var clicks = Rx.Observable.fromEvent(butt, 'click');
var higherOrder = clicks.map((ev) => Rx.Observable.interval(1000));
var firstOrder = higherOrder.mergeAll();
firstOrder.subscribe(x => console.log(x));


Przy mergeAll, jezeli 2 razy szybko kliknę, wartości są mergowane, czyli konsola pokaże:
(2x) 1
(2x) 2
(2x) 3 ..

I wydaje się to poprawne i porządane.

Natomiast w przypadku merge wartości to:
1
1
2
2
3
3..

Nie rozumiem dlaczego w przypadku merge dane nie są mergowane do jednej wartości, skoro pojwiaja sie w tym samym czasie(?).
whitty
Posty: 106
Dołączył(a): 12.07.2015


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51510 zarejestrowanych użytkowników.
Najnowszy użytkownik: Steeveroutt


Nasi użytkownicy napisali:

  • 937837 wiadomości
  • w 247508 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)