How to return an array from rxjs observable?

Question

I've started with simply pulling in an array and mapping over the values, setting to state and then displaying on screen using conventional react and javascript methods

Now I want to rebuild this with rxjs

{
    "countriesList": [
        {
            "name": "Australia"
        },
        {
            "name": "Austria"
        },
        {
            "name": "Beligum"
        },
        {
            "name": "Belize"
        },
        {
            "name": "Brazil"
        },
        {
            "name": "Cameroon"
        },
        {
            "name": "Denmark"
        }
    ]
}


const countries$ = of(countriesList) // this returns the array above

but then I want to filter this list when I start typing values. typically I would build a function, and then filter based on the input. but struggling to replicate this with rxjs

I've tried the following and keep getting countries.map is not a function

return countries$.subscribe((countries) => countries)

I also tried this:

countries$.pipe(map((country) => country.filter((ctry) => ctry.name.toLowerCase().startsWith(e.target.value))))

whereby I want to map then filter and return the values that start with the letters typed in

not really getting the hang of this

any ideas?

Answer 1

Ok for starters I am trying to learn rxjs lately so I hope my example will help you understand the differences between of and from .

Also it would be nice to review the of and from "creators".

const { from, of, pipe } = rxjs;
const { map, filter } = rxjs.operators;

console.clear();

const countries = [
        {
            "name": "Australia"
        },
        {
            "name": "Austria"
        },
        {
            "name": "Beligum"
        },
        {
            "name": "Belize"
        },
        {
            "name": "Brazil"
        },
        {
            "name": "Cameroon"
        },
        {
            "name": "Denmark"
        }
    ];

const countriesFrom$ = from(countries);
const countriesOf$ = of(countries);

console.log("----stream from----")
countriesFrom$.subscribe(val => console.log(val));

console.log("----stream of----")
countriesOf$.subscribe(val => console.log(val));

const countries$ = from(countries);

console.log('----filtering----');

countries$.pipe(
  filter(country => country && country.name && country.name.startsWith('A')),
  map(console.log)
).subscribe()

basically of unlike from , it does not do any flattening and emits each argument in whole as a separate next notification