RxJSでのJSONオブジェクトの処理

Question

私は一般的にcyclejsとrxjsの新人です。誰かが私の問題を解決するのを助けてくれることを願っていました。 私は理解のためにデモアプリケーションを作成しようとしています.DOM上にJSONオブジェクトを描画することに固執しています。

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

• 私はnear_earth_objects JSONオブジェクトに興味がありますが、私はそれがオブジェクトであることのbeacauseそれをマッピングすることができません

  { "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: [{...}], ... } }

を次のように私はAPIから取得応答があります。 このような状況をどうすれば処理できますか？以下は、私は概念的に

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; 
}; 

Answer 1

を持っているコードは、あなたが（すなわち、配列にオブジェクトを回す）nasa.near_earth_objectsのエントリを抽出したい、そしてフラットな観察可能なシーケンスにその配列をマッピングしています。

私はあなたのプロジェクトですでにlodashを使っていると仮定します（あなたはロダッシュなしで行うことができますが、手動でグルーコードを書く必要があります）。また、RxJSのObservableをRx.Observableとしてインポートしていると仮定します。下の名前をあなたのコードに合わせて調整してください。

あなたは.flatMap()を呼び出し、そしてRx.Observable.from(near_objects)を返すことによって_.toPairs(nasa.near_earth_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) 
    ])) 
),