Angular HttpClient订阅选择数据中的属性

时间:2018-12-13 08:44:57

标签: json angular typescript

我真的很确定,这里可以多次回答这个问题。但是我找不到他们/不知道要搜索哪个术语。

我有一个看起来像这样的JSON文件:

{
  "pages": [{
      "displayname": "PageA",
      "url": "http://google.de",
      "icon": "iconZ"
    },

    {
      "displayname": "PageB",
      "url": "http://www.pageb.co.uk",
      "icon": "iconY"
    }
  ],
  "icons": [{
      "alias": "iconZ",
      "filename": "iconZ.svg"
    },

    {
      "alias": "iconY",
      "filename": "iconY.svg"
    }
  ]
}

现在我正在使用HttpClient(这里称为httpService)从文件中获取数据。

this.httpService.get('./assets/pageconfig.json').subscribe(
      data => {
        this.arrAdress = data as string[];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );

我想在前端的ngFor中使用页面的内容,并且想要获取一个图标内容的数组以在后端中使用。如何使用属性选择/分割数据。

感谢您的帮助 埃里亚斯

3 个答案:

答案 0 :(得分:0)

需要删除字符串[],而是使用对象数组或任何对象。

do.call(rbind, 
        lapply(all_comb_store, 
               function(nb_comb) {
                 data.frame(Store_Name=if (nrow(nb_comb)==1) as.character(nb_comb) else apply(nb_comb, 2, paste, collapse="_"), 
                            Customers_Visited=apply(nb_comb, 2, 
                                                    function(vec_stores) {
                                                       length(Reduce(intersect, 
                                                              lapply(vec_stores, 
                                                                     function(store) mydata_data$Customer_Name[mydata_data$Store_Name %in% store])))}))}))
#  Store_Name Customers_Visited
#1         x1                 2
#2         x2                 3
#3         x3                 1
#4      x1_x2                 1
#5      x1_x3                 0
#6      x2_x3                 1

答案 1 :(得分:0)

考虑到pageconfig.json在前端和后端都使用,并且只需要在角度应用程序中使用“ pages”属性,就可以通过以下方式获得它:

this.httpService.get('./assets/pageconfig.json').subscribe(
  data => {
    this.arrAdress = data.pages;
  },
  (err: HttpErrorResponse) => {
    console.log(err.message);
  }
);

您不需要强制转换数据类型。

您还可以使用rxjs可观察的映射链来解析数据并仅获取您感兴趣的内容:

import { map } from 'rxjs/operators';

this.httpService.get('./assets/pageconfig.json')
  .pipe(map(data => data.pages))
  .subscribe(pages=> {
    this.arrAdress = pages;
  }.catch((err: HttpErrorResponse) => {
    console.log(err.message);
  });

我希望这就是您想要的。

答案 2 :(得分:0)

您在这里有两种解决方案来解决这个问题

假设httpClient.Delete()选项返回给您一个observable对象,其中有employeeId作为属性。

解决方案1(示例)

创建一个局部变量,并使用let语句(e.g. let response: any = data;).

向其分配数据
delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            data => {
                let response: any = data;
                // now you can use response.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}

解决方案2(示例)

将任何(e.g. (data : any)分配给收到的响应

delete(employee: any) {
    this.employeeService.deleteEmployee(employee.id)
        .subscribe(
            (data: any) => {
             // now you can use data.employeeId
            },
            (error) => {
                console.log(error)
            },
            () => {
                console.log("The operation has been completed")
            }
        );
}