javascript - Finns det ett korrekt sätt att kartlägga objektnyckelnamn till mer läsbara representationer?

Min server returnerar ett objekt som ser ut så här:

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

Jag vill presentera detta i UI:t (byggt i Angular 2+) med *ngFor men jag vill inte använda nyckelnamnen som de är nu. Jag vill ha något mer användarvänligt, som

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

Finns det ett "korrekt" sätt att tillhandahålla en mappning från nyckelnamn till användarvänliga nyckelnamn? Om inte skulle jag förmodligen bara göra något för att säkerställa att nyckelnamn är i camel case och sedan i användargränssnittet använda en funktion för att konvertera camel case-nyckelnamn till mellanrumsersättnings användarvänliga namn.

Men det skulle vara coolt om någon hade ett förslag som inte innebar att jag ändrade något på serversidan, och gjorde en mappning på användargränssnittet

Svar #1

Exponera ett gränssnitt för en fältskarta.

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

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

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

Använd detta i din komponent, t.ex.

@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() {

    }
}

Svar #2

Du kan hålla en mappning av nycklar till läsbara etiketter och omvandla svaret till objekt med etikett/värde.

Dessa objekt kan användas i ngFor för att visa etikett och värde.

const response = {
   firstName: "Joe",
   lastName: "Smith",
   phoneNum: "212-222-2222"
};

const labels = {
   firstName: "First Name",
   lastName: "Last Name",
   phoneNum: "Phone Number",
   address: "Address"
}

const result = Object.keys(response).map(key => ({label: labels[key], value: response[key]}));

console.log(result);