0

私は一般的にcyclejsとrxjsに不慣れで、誰かが私の問題を解決するのを手伝ってくれることを望んでいました. 私の理解のためにデモアプリケーションを構築しようとしていますが、DOM で JSON オブジェクトをレンダリングすることに固執しています。

  • 私のデモ アプリケーションは、過去 7 日間の NASA 地球近傍オブジェクト API を呼び出し、それらを表示しようとします。
  • 下部にボタンがありLoad More、クリックすると過去 7 日間 ( まで ) のデータが読み込まれToday - 7ますToday - 14。

  • API から得られる応答は次のとおりです。

    { "links" : { "next" : "https://api.nasa.gov/neo/rest/v1/feed?start_date=2016-09-06&end_date=2016-09-12&detailed=false&api_key=DEMO_KEY", "prev" : "https://api.nasa.gov/neo/rest/v1/feed?start_date=2016-08-25&end_date=2016-08-31&detailed=false&api_key=DEMO_KEY", "self" : "https://api.nasa.gov/neo/rest/v1/feed?start_date=2016-08-31&end_date=2016-09-06&detailed=false&api_key=DEMO_KEY" }, "element_count" : 39, "near_earth_objects" : { "2016-09-06" : [{ some data }, { some data }], 2016-08-31: [{...}], ... } }

near_earth_objects JSON オブジェクトに興味がありますが、オブジェクトであるためマップできません。このような状況に対処するにはどうすればよいですか? 以下は私が持っているコードです

function main(sources) {
    const api_key = "DEMO_KEY";
    const clickEvent$ = sources.DOM.select('.load-more').events('click');
    const request$ = clickEvent$.map(() => {
        return {
            url: "https://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-06&end_date=2016-09-13&api_key=" + api_key,
            method: "GET"
        }
    }).startWith({
        url: "https://api.nasa.gov/neo/rest/v1/feed?start_date=2016-08-31&end_date=2016-09-06&api_key=" + api_key,
        method: "GET"
    });
    const response$$ = sources.HTTP.filter(x$ => x$.url.indexOf("https://api.nasa.gov/neo/rest/v1/feed") != -1).select(response$$);
    const response$ = response$$.switch(); //flatten the stream
    const nasa$ = response$.map(response => {
        return response.body
    });

    const sinks = {
        DOM: nasa$.map(nasa =>
            ([nasa.near_earth_objects]).map(objects => {
                var vdom = [];
                //I am not very happy with this part. Can this be improved?
                for (var key in objects) {
                    if (objects.hasOwnProperty(key)) {
                        vdom.push(objects[key].map(obj => div([
                            h1(obj.name)
                        ])))
                    }
                }
                //returning the vdom does not render on the browser. vdom is an array of arrays. How should i correct this?
                console.log(vdom);
                return vdom;
            })
        ),
        HTTP: request$
    };
    return sinks;
};
4

1 に答える 1

1

概念的には、エントリを抽出しnasa.near_earth_objects(つまり、オブジェクトを配列に変換)、その配列を Observable シーケンスにフラット マップします。

プロジェクトですでにlodashを使用していると仮定します (lodash がなくても実行できますが、グルー コードを手動でさらに記述する必要があります)。また、RxJS の Observable をRx.Observable;としてインポートしていると仮定します。コードに合わせて以下の名前を調整してください。

最初のタスクは を使用して実行でき_.toPairs(nasa.near_earth_objects)、2 番目の部分は を呼び出し.flatMap()て を返すことで実行できRx.Observable.from(near_objects)ます。結果の Observable は、 の各キーのアイテムを発行しnasa.near_earth_objectsます。item[0]各項目は、項目のキー (例: 2016-09-06) とitem[1]項目の値を持つ配列になります。

DOMそのアイデアを使用して、シンクを次のようなものに置き換えることができます。

nasa$.map(nasa => _.toPairs(nasa.near_earth_objects))
    .flatMap(near_objects => Rx.Observable.from(near_objects))
    .map(near_object => div([
        h1(near_object[1].name)
    ]))
),
于 2016-09-01T10:01:18.597 に答える