How to display Model property name instead of Json key names in angular?

Question

I have a model interface Employee defined:

export interface Employee {
   Name: string;
   Joining:string;
   Team: string;
   Manager: string;
   Position: string;
   Rating: string;
}

I get the values from a service by calling an Api in the following format:

{
  employee_name: "James", joining_year: "2004", employee_rating: "", job_position: "Network Staff Member", manager_name: "Joel", team_name: "Network"
}

I want to display the Property name of models instead of the Json key names. Currently it is displayed like this:

employee_name    joining_year  manager_name
   James              2004           Joel

I want to show it like:

Name               Joining          Manager  
James                2004              Joel

I am getting the json response this way:

this._employeeService.getData()
  .subscribe(response => {
        this.empInfo = <Employee>response;
   });

Something I tried:

Getting the data for columns:

 Object.keys(this.empInfo[0]).forEach((item: string) => {
    this.columns.push({ title: item});
});

Template code:

<div class='panel panel-primary'>
  <div class='panel-heading'>
    {{pageTitle}}
  </div>
  <div class='panel-body'>
    <div class='table-responsive'>
      <table class='table'>
        <thead>
          <tr>
              <th *ngFor="let column of columns">
                  {{column.title}}
                </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let employee of empInfo'>
            <td>{{ employee?.employee_name }}</td>
            <td>{{ employee?.joining_year }}</td>
            <td>{{ employee?.manager_name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

You need to make an intermediate contract or something similar. Besides, remember that interfaces, in typescript, does not exist at all at runtime, hence you probably would like to use a class instead. What I can suggest you, if your are acquiring the response from the rest api, is to use the library cerialize github.com/weichx/cerialize .This would be by far the most reliable solution (use @autoserializeAs to accomplish your goal) — briosheje
– briosheje, Commented Sep 12, 2018 at 9:39
How do you show the data on the template? Can you include the code? — kboul
– kboul, Commented Sep 12, 2018 at 9:42

End · Accepted Answer · 2018-09-12 09:56:02Z

3

You can map your data inside the getData method:

this._employeeService.getData()
  .subscribe(response => {
      this.empInfo = response.map(
      employee => {
        return {
          Name: employee.employee_name,
          Joining: employee.joining_year,
          Rating: employee.employee_rating,
          Position: employee.job_position,
          Manager: employee.manager_name,
          Team: employee.team_name
        }
      }
    )
});

answered Sep 12, 2018 at 9:56

End

6464 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antoine V · Accepted Answer · 2018-09-12 09:45:26Z

You can map your data to your class by map

So , in your getData()

getData() {
  return this._http.get('url')
    .map((response: Response) => response.json().map(res => new Employee(res.employee_name, res.joining_year, manager_name)));
  }

and your class has a constructor

public interface IEmployee 
{
   Name: string;
   Joining:string;
   Team: string;
   Manager: string;
   Position: string;
   Rating: string;
}

public class Employee extends IEmployee {
    constructor(
        public name: string,
        public year: string,
        public manager: string
      ) 
    {
          //set properties....
    }
}

Collectives™ on Stack Overflow

How to display Model property name instead of Json key names in angular?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related