Question

我有一些来自外部来源的JSON数据：https://www.guidle.com/m_3GbJsF。

我正在使用HttpClient来获取数据，并使用RxJS映射来处理它们。这是我的服务：

    getEvents() { 
          return this.http.get<any[]>(this.baseUrl)
            .pipe(
               map((data: any) => {
                 return data.groupSet[0].offers;
               }),
             );
     }

问题出在这一步...我想用我的对象Event映射JSON字段，然后将其放入数组中。例如：

Event.id = id
Event.name = bpName
Event.startDate = schedules.dates[0].startDate

这是我的方法：

mapEvents() {
    const events = this.getEvents();
      const eventsProcessed = events
         .pipe(
             map(({id, bpName, schedules.dates[0].startDate}) => new Event(id, bpName, schedules.dates[0].startDate)),
             toArray()
     );

return eventsProcessed;
}

但是它不起作用，而且我不知道如何使用RxJS来实现我的目标（如果可能的话）。

我当然不能正确理解RxJS和Observable，但是在花了几个小时编写这个小代码和官方文档之后，我认为需要别人的帮助。

也许还有其他解决方案，所以我愿意接受任何其他建议。

非常感谢！

我认为问题来自：

    getEvents() { 
          return this.http.get<any[]>(this.baseUrl)
            .pipe(
               map((data: any) => {
                 return data.groupSet[0].offers;
               }),
             );
     }

它返回一个数组。

Picture : results in console

如果我尝试这样做，它将起作用：

dataTest = from([
        {
            id: 1058907,
            bpName: 'Amt für Kultur',
            schedules: {
                dates: [
                    {
                        startDate: "18.06.2019",
                    }
                ]
            },

        },
        {
            id: 1058909,
            bpName: 'Kath. Pfarramt St. Michael',
            schedules: {
                dates: [
                    {
                        startDate: "19.06.2019",
                    }
                ]
            },

        },
    ]);

Picture : result in console

是否需要将getEvents（）的返回值更改为与dataTest相同的类型？

Answer 1

如前所述，问题是您的http get请求发出一个简单的项目，该项目是元素数组。因此，一个简单的映射正在尝试映射 array 而不是数组元素。

我使用这样的代码映射到一个类：

  productsClassInstance$ = this.http.get<ProductClass[]>(this.productsUrl)
    .pipe(
      map(products => products.map(product => {
        const productInstance: ProductClass = Object.assign(new ProductClass(), {
          ...product,
          price: product.price * 1.5
        });
        return productInstance;
      })),
      catchError(this.handleError)
    );

我遵循三个步骤：

1）我映射了从http get返回的数组（请参见第一个map语句）。

2）我使用 array map方法来映射数组中的每个元素（请参见products.map）

3）我变换每个数组元素，以创建该类的新实例（请参见products.map箭头函数的正文）。

希望这会有所帮助。

使用httpClient和RxJS映射将JSON与特定类映射

1 个答案: