CODEWITHSUNDEEP
angulartypescript
Dave
Dave

Reputation: 7359

Typescript: Converting json from api call to Array<object>

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?

Upvotes: 5

Views: 733

Answers (2)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

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);

Upvotes: -1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

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));

Upvotes: 3

Related Questions