5

From API, I am receiving this JSON:

[{
  "id: "0",
  "name_surname": "John Smith",
  "age": 33,
  "profile__image": "..."
},{
  "id: "1",
  "name_surname": "Juan García",
  "age": 32,
  "profile__image": "..."
}]

I have the next class in TypeScript:

export class Employee {
    public Id: string = null;
    public NameSurname: string = null;
    public Age: number = 0;
    public ProfileImage: string = null;
}

I want to return as Array<Employee> the result of API call.

As you see in the API call I receive the array with the properties separated by underscore (_). How can I convert to standard class without underscore?

3
  • 2
    Does this answer your question? How to rename field from object Commented Jul 18, 2020 at 14:07
  • why dont u change your Employee class with response Commented Jul 18, 2020 at 14:12
  • Well I was thinking in automatic assignation which I don't have to set propery by property. I was thinking in concret something like map which I sould configure it and translate data automatically. I don't know if typescript has something... like map .. Commented Jul 18, 2020 at 14:15

2 Answers 2

3

Demo add constructor to your Employee model

 export class Employee {
        public Id: string = null;
        public NameSurname: string = null;
        public Age: number = 0;
        public ProfileImage: string = null;

        constructor(param:any){
          this.Id=param.id;
          this.NameSurname=param.name_surname,
          this.Age=param.age,
          this.ProfileImage=param.profile__image
        }

    }

then in component map data result to your model

result:Employee[];

this.result=this.data.map(x=>  new Employee(x));

Demo2 if you dont want use constructor then then you can define function inside your model.

export class Employee {
    public Id: string = null;
    public NameSurname: string = null;
    public Age: number = 0;
    public ProfileImage: string = null;
    
    constructor(){ }

    mapObj(param:any){
      this.Id=param.id;
      this.NameSurname=param.name_surname,
      this.Age=param.age,
      this.ProfileImage=param.profile__image
      return this;
    }
}

then you can call like

this.result=this.data.map(x=>  new Employee().mapObj(x));
Sign up to request clarification or add additional context in comments.

Comments

-1

Creating a function to convert the data

import {CommonModule} from '@angular/common';
import {Component, } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

export class Employee {
    public Id: string = '';
    public NameSurname: string = '';
    public Age: number = 0;
    public ProfileImage: string = '';
}

const data = [{
  "id": "0",
  "name_surname": "John Smith",
  "age": 33,
  "profile__image": "..."
},{
  "id": "1",
  "name_surname": "Juan García",
  "age": 32,
  "profile__image": "..."
}]

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: `<div>{{employee | json}}</div>`,
})
export class AppComponent {
  employee: Employee[] = []

  constructor() {
    this.employee = this.dataToEmployee()
  }

  dataToEmployee = (): Employee[] =>
    data.map((x) => ({
      Id: x.id,
      NameSurname: x.name_surname,
      Age: x.age,
      ProfileImage: x.profile__image,
    }))
}

bootstrapApplication(AppComponent);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.