如何将响应 json 与 TypeScript 接口 Angular6 对齐

Posted 2023-03-13

【中文标题】如何将响应 json 与 TypeScript 接口 Angular6 对齐

【英文标题】：How to align response json with TypeScript interface Angular6

【发布时间】：2018-11-13 19:52:58

【问题描述】：

我正在从后端端点检索已上传文件的列表，该端点以下列格式返回：

[
    
        "filename": "setup.cfg",
        "id": 1,
        "path": C:\\back-end\\uploads\\setup.cfg",
        "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
    ,
    
        "filename": "57760713_1467275948.jpg",
        "id": 2,
        "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
    ,

    .
    .
    .

]

并且我有以下 TypeScript 界面可以与它们对齐：

export interface UploadModel 
    id: number;
    name: string;
    path: string;
    uploadedAt: Date;

如您所见，检索到的数据使用snake_case命名约定为uploaded_at，而接口使用camelCase约定为uploadedAt。

我想用下面的sn-p从后端获取数据：

  getUploads(): Observable<UploadModel[]> 
    this.http.get(UPLOADS_ENDPOINT)
     .map((response: Response) => 

         // parse the json response here, and return an array of UploadModels

     );
  

是否有任何巧妙的方法来映射这两种表示，而不通过 JSON 对象数组进行映射？

【问题讨论】：

未内置在 Angular 中。您必须自己编写一些东西或找到合适的库。

@jonrsharpe 很抱歉听到但谢谢:)

【参考方案1】：

不，没有。

我建议您应对您的回复，但您似乎不想这样做。

因此，您有三个解决方案：

创建两个接口：IUploadResponse 和 IUpload（model 是多余的）。实例化这些接口的对象将在构造函数中进行显式映射，

创建一个具有转换方法的抽象类：再次，显式映射，

创建一个snake_case 到camelCase 转换器，它创建一个从snake 到camel 的普通对象。优点是可以重复使用，缺点是不能将filename 更改为name。此外，它本身不会创建对象，因此您将无权访问typeof 或instanceof。

【讨论】：

you can't change filename to name - 这是个好点...你真的需要重命名这些以及更改样式吗？

正如@Fenton 所说。我强烈建议您应对自己的回复，这确实是最简单的方法。

【参考方案2】：

您可以编写一个通用函数，将所有键从下划线转换为驼峰式。这是一个相当粗糙的版本 - 如果您需要修复嵌套对象，您可以使其更加优雅甚至递归。

const data = [
  
    "filename": "setup.cfg",
    "id": 1,
    "path": "C:\\back-end\\uploads\\setup.cfg",
    "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
  ,
  
    "filename": "57760713_1467275948.jpg",
    "id": 2,
    "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
    "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
  
];

function underscoreToCamel(key: string) 
  return key.replace(/_([a-z])/g, function (g)  return g[1].toUpperCase(); );


function convertKeys(input: any[]) 
  const output = [];
  for (const item of input) 
    const obj = ;
    for (const key in item) 
      obj[underscoreToCamel(key)] = item[key];
    
    output.push(obj);
  
  return output;


const result = convertKeys(data);
console.log(result);

输出：

[
    
        "filename":"setup.cfg",
        "id":1,
        "path":"C:\\back-end\\uploads\\setup.cfg",
        "uploadedAt":"Fri, 01 Jun 2018 09:25:19 -0000"
    ,
    
        "filename":"57760713_1467275948.jpg",
        "id":2,
        "path":"C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploadedAt":"Mon, 04 Jun 2018 09:09:59 -0000"
    
 ]

【讨论】：

在使用 Laravel + React 时非常有用