javascript - 是否有正确的方法将对象键名称映射到更可读的表示形式？

Question

我的服务器返回一个如下所示的对象:

{
   firstName: "Joe",
   lastName: "Smith",
   phoneNum: "212-222-2222"
}

我想使用 *ngFor 在 UI(内置于 Angular 2+ 中)中呈现此内容，但我不想使用现在的键名称。我想要一些更用户友好的东西，比如

First Name: Joe 
Last Name: Smith 
Phone Number: 212-222-2222

是否有一种“正确”的方法来提供从键名称到用户友好的键名称的映射？如果不是，我可能会做一些事情来确保键名称采用驼峰式大小写，然后在 UI 中使用函数将驼峰式大小写键名转换为间隔的用户友好名称。

但是，如果有人提出一个不涉及我在服务器端更改任何内容并在 UI 上进行映射的建议，那就太酷了

Answer 1

公开字段映射器的接口(interface)。

interface FieldMapper {
   firstName: string,
   lastName: string,
   phoneNumber: string,
}

interface LabeledField {
  label: string,
  value: string,
}

interface UserRenderable {
  firstname: LabeledField,
  lastname: LabeledField,
  phoneNumber: LabeledField,
}

在您的组件中使用它，例如

@Component({
    ...
    template: `
        <ul>
        <li *ngFor="#user of users">{{user.firstname.label}}
            {{user.firstname.value}}</li>
        <ul>
    `
})
export class Users {
    users: Array<UserRenderable>
    fieldMapper: FieldMapper = {
        firstName: 'First Name',
        lastName: 'Last Name',
        phoneNumber: 'Phone Number'
    }

    constructor(private userService : UserService) {
      const users = userService.get(); 
      this.users = users.map((u) => (
        Object.keys(
          this.fieldMapper
        )
        .reduce(
          (prev, currKey) => {
            prev[currKey] = {
              label: this.fieldMapper[k],
              value: u[k]
            }
            return prev;
          }, {})
      ));
    }

    ngOnInit() {

    }
}