如何使用 RxJS 運算符創建可觀察的自定義對象流

Question

我目前有如下輸入

const config = {
  'mainA': { sub1: { name: 'test1'}, sub2: { name: 'test2'}},
  'mainB': { sub1: { name: 'test3'}, sub2: { name: 'test4'}}
};

我正在嘗試編寫一個函數 (createCustomObservable)，它將使用標准 RsJS 運算符創建一個可觀察對象，如下所示

var observable = createCustomObservable(config);
observable.subscribe((x) => console.log(x));

控制台輸出應如下所示

{'mainA': 'test1'} -> {'mainA': 'test2'} -> {'mainB': 'test3'} ->  {'mainB': 'test4'} 

具有單一屬性的一系列對象

有誰知道如何使用 RxJS 運算符來實現這一點？ 任何幫助將不勝感激。

Answer 1

您嘗試解決的主要問題是遍歷對象以獲取包含“名稱”字段的所有對象，並獲取它們的值。

沒有 Rx 運算符可以自動執行此操作，因此要完成此任務，您只需使用Rx.Observable.create - https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/創建.md

const config = {
'mainA': {
    sub1: {
        name: 'test1'
    },
    sub2: {
        name: 'test2'
    }
},
'mainB': {
    sub1: {
        name: 'test3'
    },
    sub2: {
        name: 'test4'
    }
}
};


function traverse(o, func) {
    for (var i in o) {
        func.apply(this, [i, o[i]]);
        if (o[i] !== null && typeof(o[i]) == "object") {
            //going on step down in the object tree!!
            traverse(o[i], func);
        }
    }
}

var source = Rx.Observable.create(function(observer) {

    traverse(config, function(key, value) {
        if (key == "name")
            observer.onNext(value);
    });

    observer.onCompleted();
    return function() {
        console.log('disposed');
    };
});

source.subscribe(function(next) {
    console.log(next);
})

示例： https : //jsbin.com/yolufovubi/edit?js,console

Answer 2

我們可以通過 Observable 構造函數創建一個新的流，你必須手動調用 next()、error() 和 complete() 函數。

function createCustomObservable(config) {
   return new Observable(
      observer => {
         try {
           observer.next(config)
        } catch(err) {
          observer.error(err);
       } finally {
         observer.complete();
      }
    })
 }

並以這種方式使用它

var observable = createCustomObservable(config);
observable.subscribe((x) => console.log(x));