您如何将结构化数据变成可观察的数据?

时间:2018-07-18 04:29:34

标签: angular typescript rxjs

我有一个Web API返回一些结构化数据。

{
    i: {
        f: [...],
        a: val,
        b: val
    },
    a: [...],
    b: [...],
    c: [...]
}

我将其返回到有角度的6应用程序-我假设使用的是Observables和rxjs。我在observables上看到的所有示例均假定将数组强制转换为observable。但是,此数据是结构化的,并且在结构中包含一些子数组。

我是Angular的新手,所以我正在寻找可能的方向。

2 个答案:

答案 0 :(得分:2)

服务:

import {
    HttpClient,
    HttpErrorResponse,
    HttpEvent,
    HttpHandler,
    HttpInterceptor,
    HttpRequest,
    HttpHeaders
} from '@angular/common/http';

constructor(private httpClient: HttpClient,
        ) {
    }

    /**
     * This method is use for send GET http Request to API.
     * @param url - Additional request URL.
     * @param options  - Header(s) which will pass with particular request.
     */
    get(url: string, options?: any): Observable<any> {

        return this.httpClient.get(url, this.requestOptions(options))
    }





   /**
    * Request options.
    * @param headerOptions
    * @returns {RequestOptionsArgs}
    */
    private requestOptions(headerOptions?: any): any {
        options = {
                    headers: new HttpHeaders({
                        "Authorization": "Bearer " + token,
                        "Content-Type": "application/json"
                    })
                }
             }

component.ts:

 myData: Array<any>;

    /**
     * This method is used to get  data
     */
    getFormData(filter) {

        this.requestURL = `your_url`;

         this.http.get(this.requestURL, options).subscribe(response => {

              this.myData = response as ArrayCast[]
              console.log(response)
            })
           ;
    }

export class ArrayCast{
  a: any;
  b: any;
  c: any;
}

答案 1 :(得分:1)

首先,如何将数据获取到Angular应用程序中?通过http通话? 然后,您会自动(使用Angular5 + => HttpClient)将获得一个包含整个结构(带有所有嵌套和内部所有数组)的可观察对象。

this.http.get(url).subscribe( result => console.log(result));

如果获取此“ URL”将返回复杂的json,则您将获得一个可观察到的对象,该对象将恰好发出一个值。这个值将是整个复杂的json。

一个Observable可以包装所有内容。基本体(数字,字符串,布尔值)或复杂对象。对于可观察到的没有区别。

您还可以直接在代码中创建一个可观察对象(例如,出于测试目的)

import {of} from 'rxjs/internal/observable/of';
of(myData);

创建可观察对象的方法有多种(请看一下这些示例here

热烈的问候