在 RxJS 中处理 JSON 个对象

Question

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

Answer 1

从概念上讲，您想提取 nasa.near_earth_objects 的条目（即，将对象变成一个数组），然后将该数组平面映射到一个 Observable 序列。

I'll assume you're already using lodash in your project (you can do it without lodash, but you'll just need to write more glue code manually). I'll also assume you're importing RxJS' Observable as Rx.Observable; adjust the names below to suite your code.

您可以使用 _.toPairs(nasa.near_earth_objects) 完成第一个任务，通过调用 .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)
    ]))
),

在 RxJS 中处理 JSON 个对象

Handling JSON Objects in RxJS

rxjs

cyclejs