RxJS: Operator filter

Opublikowano: 02.08.2022 - tagi: JavaScript RxJS Operator Pipe

Operator filter służy do przefiltrowania danych z Observable.

Sami określamy warunki filtracji.

Przykłady

Przykład 1

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const observable = from([1, 2, 3, 4,  5, 6]).pipe(
    filter(value => value > 3)
);

observable.subscribe(console.log);
// Wyświetli:
// 4
// 5
// 6

Przykład 2

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const data = [
    {
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'service'
        title: 'Service 1'
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
];

const observable = from(data).pipe(
    filter(item => item.type  === 'product')
);

observable.subscribe(console.log);

// Wyświetli:
[
	{
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
]

Przykład 3

Załóżmy, że chcemy odbierać zdarzenie na wciśnięcie tylko klawisza: Enter lub spacji, a inne należy ignorować.

import { fromEvent } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const observable = fromEvent(document, 'keydown').pipe(
    map(event => event.code),
    filter(code => code === 'Enter' || code === 'Space')
);

observable.subscribe(console.log);

Wyświetli Enter po wciśnięciu klawisza Enter. Lub Space po wciśnięci spacji. Dla innych klawiszy nic się nie wyświetli.


Podsumowanie: Lipiec 2022

Opublikowano: 31.07.2022 - tagi: Podsumowanie Lipiec 2022 Blog

W lipcu opublikowałem 12 wpisów:


Webstorm:

  1. Nawigacja w kodzie
  2. Jak uruchomić automatycznie formatowanie kodu po zapisie pliku?

JavaScript:

  1. Jak umieścić element w konkretnym miejscu w tablicy?
  2. Jak posortować tablicę obiektów po danej właściwości?
  3. Jak znaleźć klucz w obiekcie na podstawie wartości?

Inne:

  1. Dlaczego warto tworzyć własne projekty?
  2. Jak skończyć własny projekt?

MongoDB:

  1. Jak pobrać rekordy na podstawie ciągu znaków?
  2. Jak pobrać rekordy z tablicy obiektów?
  3. Jak dodać do tablicy element bez duplikatu?

Narysowałem dwa komiksy:

  1. Deployment on Friday
  2. What color is it?

Przeczytałem trzy książki:

  1. Królestwo - Szczepan Twardoch
  2. Księżyc zaszedł, W niepewnym boju - John Steinbeck
  3. Nie ma tego Złego - Marcin Mortka

Przesłuchałem dwa audiobooki:

  1. O zmierzchu - Therese Bohman
  2. Stranger Things: Mroczne umysły - Gwenda Bond

Webstorm: Jak uruchomić automatycznie formatowanie kodu po zapisie pliku?

Opublikowano: 28.07.2022 - tagi: Webstorm Narzędzie Porada Kod Zapis Produktywność

Ten wpis dotyczy konkretnie Prettier'a do formatowania kodu.

Przejdź do ustawień: skrót klawiszowy: CTRL + ALT + S lub: File -> Settings.

Następnie idź do: Languages & Frameworks -> JavaScript -> Prettier.

Zaznacz pole: On save. I zapisz ustawienia. Od tego momentu kiedy zapiszesz zmiany w pliku (skrót: CTRL + S) formatowanie zostanie uruchomione automatycznie.


Comics: What color is it?

Opublikowano: 26.07.2022 - tagi: Komiks Rysowanie Kolor


MongoDB: Jak dodać do tablicy element bez duplikatu?

Opublikowano: 23.07.2022 - tagi: MongoDB Baza danych Zpytanie Tablica

Operator $push pozwala na dodanie do tablicy daną wartość:

Kolekcja:

{
	_id: 1,
	tags: ['foo', 'bar']
}

Zapytanie:

db.collection.updateOne({ _id: 1}, { $push: { tags: 'bar' } });

Do tablicy tags doda nowy element: bar:

{
	_id: 1,
	tags: ['foo', 'bar', 'bar']
}

Mamy dwa elementy o takiej samej wartości: bar. Co jeśli chcemy dodać nowy element, pod warunkiem że nie istnieje on już w tablicy?

Unikanie duplikatów

Okazuje się, że ten problem można łatwo rozwiązać za pomocą operatora: $addToSet:

db.collection.updateOne({ _id: 1}, { $addToSet: { tags: 'bar' } });

Ponieważ bar już istnieje tablicy tags to nie zostanie on dodany do tablicy.