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（即，将 Object 转换为 Array）的条目，然后将该 Array 平面映射为 Observable 序列。

我假设你已经在你的项目中使用了 lodash（你可以不使用 lodash，但你只需要手动编写更多的胶水代码）。我还假设您将 RxJS 的 Observable 导入为Rx.Observable; 调整下面的名称以适应您的代码。

您可以使用 来完成第一个任务，通过调用和返回来完成_.toPairs(nasa.near_earth_objects)第二部分。生成的 Observable 将为 中的每个键发出项目。每个项目都是一个数组，作为项目的键（例如，）和项目的值。.flatMap()Rx.Observable.from(near_objects)nasa.near_earth_objectsitem[0]2016-09-06item[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 回答