Question

我开始使用Angular7，我遵循了教程来构建一个应用程序，该应用程序从Web服务获取输入并将结果放入对象数组中。

只要数据已经以数组形式出现，它就会起作用。当数据采用JSON格式时，它将停止工作。

问题是，我在网络论坛上找到的所有答案都包含使用map函数，当我使用它时，在包含相应的定义文件（来自rxjs/operators）之后，我总是会收到错误消息

“ groups.map不是函数”。

另一个问题是，我继续为旧版本的Angular寻找解决方案，这些解决方案显然不再可用。

我正在使用Angular 7.2.11，打字稿3.2.4，rxjs 6.3.3和webpack 4.29.0，而不是许多以前的版本中的任何一个。

我面临的问题应该是一个非常普遍的问题：从REST服务器以JSON格式（嵌套和类型化）获取数据，并将数据放入应用程序执行各种任务所需的数据结构（类）中

有人建议放弃TrueScript类，并直接使用http.get调用返回的JSON对象。如果确实是最佳实践，那么我想在我发布的示例中知道如何处理JSON对象。

我试图完全简化对http get的调用：

getGroups(): Observable<Group[]> {

    this.http.get(this.groupsUrl)
      .subscribe(data => {console.log(data);
    });
}

然后，Web控制台会在groups.service.ts中向我显示正确加载的数组“组”。不过，将数组映射到应用程序对象中的下一步不起作用。

这是课程：

export class Group {  
    public dn: string;
    public cn: string[];
    public name: string[];
    public member: string[];

    constructor(args: {
        dn: string,
        cn: string[],
        name: string[],
        member: string[]
    }) {
        this.dn = args.dn
        this.cn = args.cn;
        this.name = args.name;
        this.member = args.member;
    }
}

这是服务：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Group } from './group';
import { MessageService } from './message.service';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

export class GroupService {

  private groupsUrl = '../assets/groups.json';

  groups: Group[];

  constructor(
    private http: HttpClient,
    private messageService: MessageService) { }

    getGroups(): Observable<Group[]> {

    return this.http.get<Group[]>(this.groupsUrl).pipe(
      map(groups => groups.map(groupJson => new Group(groupJson))));
  }
}

这是组件：

  getGroups(): void {
    this.groupService.getGroups()
      .subscribe(groups => this.groups = groups)
  }

这是json文件：

{
    "groups": [
        {
            "dn": "CN=mycn,OU=Groups,OU=valiant,OU=Organizations,DC=rag,DC=net",
            "cn": [
                "mycn"
            ],
            "name": [
                "mycn"
            ],
            "member": [
                "changz",
                "gorkony",
                "martoks",
                "azetburn"
            ]
        },

...

    ]
}

对于那些有相同问题的人，我在这里发布在用户Hari Prathap的帮助下构建的解决方案：

  groups: Group[];

  getConfig() {
    return this.http.get(this.configUrl).pipe(
      map(res => {
        return {
          errMessage: res.errmessage,
          errCode: res.errcode,
          groups: res.data.groups.map(obj => new Group(obj))
        };
      })
    );
  }

  ngOnInit() {
    this.getConfig().subscribe(ret => {
      console.log("errCode", ret.errCode);
      console.log("errMessage", ret.errMessage);
      console.log("groups", ret.groups);

      this.groups = ret.groups;

      console.log("Group 1", this.groups[1]);

    });
  }

解决问题的关键在于指出以下事实：http.get函数的返回值代表了REST服务器的整个响应，而不是我感兴趣的组部分。

可以使用“。”访问“组”部分。运算符，尽管IDE和编译器都不知道在编译时读取JSON的确切结构。

实际上，编译器会发出错误，但是代码仍然有效。然后可以将通过这种方式从响应中提取的组映射到一个对象数组，该对象数组与JSON文件中的数组具有相同的结构。

使用以下符号可以避免出现此错误：

groups: res["data"].groups.map(obj => new Group(obj))

Answer 1

@ Lastshaman67，

问题是管道映射方法从json文件获取整个对象而不仅仅是组。我创建了一个codeandbox供您参考。

https://codesandbox.io/embed/n7xjkrplvl

Angular7：如何从服务器获取JSON格式的数据并将其放入对象数组

1 个答案: