为什么我不能在可观察对象上链接.map（）函数

Question

I'm having difficulties understanding why i can't chain .map() functions on the callback of a get request.

const random = max => Math.floor((Math.random() * max) + 1);
this._http.get('https://unsplash.it/list')
    .map(response => response.json())
    .map(metaImages => metaImages.url_post)
    .subscribe(urls => {
        this.imgSrc = urls[random(urls.length)];
    });

So i break it down like this

const random = max => Math.floor((Math.random() * max) + 1);
this._http.get('https://unsplash.it/list')
    .map(response => response.json())
    .subscribe(metaImages => {
        const urls = metaImages.map(url => url.post_url);
        this.imgSrc = urls[random(urls.length)];
    });

But why exactly is this? Thanks for helping out.

Answer 1

Make sure you don't confuse mapping an observable, which maps the observable emission stream, with mapping an array, which maps elements in the array. In your case, if you want to map at the observable level before subscribing, your observable map must do an array mapping of the emission.

const random = max => Math.floor((Math.random() * max) + 1);
this._http.get('https://unsplash.it/list')
    .map(response => response.json())

    .map(metaImages => metaImages.map(url => url.post_url))
     ^^^ MAP EMITTED ARRAY        ^^^ MAP ELTS IN EMITTED ARRAY

    .subscribe(urls => this.imgSrc = urls[random(urls.length)]);