Connecting the attributes of the backend to the corresponding attributes on the frontend

Question

Connecting the attributes of the backend to the corresponding attributes on the frontend

If we receive the following data from the backend:

{
    idPerson:string, 
    name: string
}

Let's say I have a TypeScript class like this:

class Option {
    id: string;
    text: string;
}

Now, suppose the backend sends us this data:

"[{idperson: "1", name: "foo"}, {idperson:"2", name:"bar"}]"

When I make an Angular HTTP request and get the response, I'm parsing it like this:

let options: any[] = [];
options = JSON.parse(response);

So far, the output looks like:

[{idperson: "1", name: "foo"}, {idperson:"2", name:"bar"}]

But what I really want is to map the keys from backend to frontend keys to achieve this format:

[{id: "1", text: "foo"}, {id:"2", text:"bar"}]

Is there a way for me to do this key mapping?

json dictionary angular typescript

Answer 1

Answer №1

let data: Data[];
data = JSON.parse(response).map(item => ({
  id: item.idNumber,
  value: item.name
}));

If you find that you don't require any specific methods within the Data class, I recommend creating an interface instead.

interface Data {
  id: string;
  value: string;
}

let data: Data[];
data = JSON.parse(response).map(item => ({
  id: item.idNumber,
  value: item.name
}));

However, if you do need to include methods in the Data class:

class Data {
  constructor(public id: string, public value: string) {}

  public performAction() {
    console.log(this.id)
  }
}

let options: Option[];
options = JSON.parse(response).map(item => new Data(item.idNumber, item.name));

Answer 2

let data: Data[];
data = JSON.parse(response).map(item => ({
  id: item.idNumber,
  value: item.name
}));

If you find that you don't require any specific methods within the Data class, I recommend creating an interface instead.

interface Data {
  id: string;
  value: string;
}

let data: Data[];
data = JSON.parse(response).map(item => ({
  id: item.idNumber,
  value: item.name
}));

However, if you do need to include methods in the Data class:

class Data {
  constructor(public id: string, public value: string) {}

  public performAction() {
    console.log(this.id)
  }
}

let options: Option[];
options = JSON.parse(response).map(item => new Data(item.idNumber, item.name));

Connecting the attributes of the backend to the corresponding attributes on the frontend

Answer №1

Similar questions

Issue encountered while attempting to initiate a new project with Angular CLI

Steps for generating a unit test for code that invokes scrollIntoView on an HTML element

Error 404 Encountered During Azure Functions GET Request

Translation of title in Ionic 3 action sheet

What is the best way to compile TypeScript files without them being dependent on each other?

Angular 2: Creating a Reusable Object for Uniform JSON Structures

The art of accurately encoding/decoding a Duration field in Flutter using JSON

Typescript: Verifying if a parameter matches a specific type

Applying a setvalidator to a FormControl doesn't automatically mark the form as invalid

Do Angular 2 component getters get reevaluated with each update?

Is there a way to pass a JSON variable as a parameter in an Alamofire POST request?

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

How can I retrieve data from MongoDB using the default data type?

The content of the external json file needs to be allocated to corresponding html divs with matching names

What are the steps to deactivate all formal controls?

Using a basic XML file in Angular: A beginner's guide

TypeScript Generics: Property types do not match (the properties listed are missing)

Import divX from page2 into page 1 by utilizing jsonp to circumvent the restrictions of the same origin policy

Exploring and interpreting JSON data

Retrieve parent form validation within a child component Angular 5 control value accessor