Typescript/ Angular - How can I rename object received from server?

Question

I am getting data from service in the following format

yourData.ts file

export interface YourData {
    first_name: number;
    last_name: number;

On the UI Angular I would like to display the format to Lower camel case

html file

firstName is {{firstName}}
lastName is {{lastName}}

Where and how can I make the above change?

I was planning of something like, not sure if thats right

export const parseFromServer = (response:any) =>{
    return {
        firstName : response.first_name
    }
}

You can directly write in that case, can't you? I mean, like firstName is {{yourObject.first_name}} in your HTML. — Deepak
– Deepak, Commented Apr 1, 2021 at 4:26
@Deepak what I want is to rename first_name as firstName — Tejas Mehta
– Tejas Mehta, Commented Apr 1, 2021 at 14:28

Deepak · Accepted Answer · 2021-04-02 04:22:41Z

1

UPDATED:

If you wish to make use of the same object, the approach is to add a new key and delete the old key. Please check the old answer if you wish to make use of a new object.

    var oldObject: any = {
        first_name: 1,
        last_name: 2
    }
    var keys = Object.keys(oldObject);
    for(var key in oldObject) 
    {
        let words = key.split("_");
        oldObject[words[0][0].toLowerCase() + words[0].substring(1) + words[1][0].toUpperCase() + words[1].substring(1)] = oldObject[key]; // add new key
        delete oldObject[key]; // delete old key
    }
    console.log(oldObject)

All you need to do is just make sure there the key names are unique and the word format is {word1}_{word2}

OLD ANSWER:

From the comment, I understand you wish to rename your object keys from something like first_name to firstName. You cannot rename as such, but you can create a new object with the desired key names and assign the appropriate values.

From your example, if you know the key names already, then it is straightforward:

var oldObject = {
    first_name: 1,
    last_name: 2
}
var newObject = {
  firstName: oldObject.first_name,
  lastName: oldObject.last_name
}; 
console.log(newObject)

If you don't know the key names, but you know the format is {word1}_{word2}, then you can write your own logic. Here's one:

var oldObject: any = {
    first_name: 1,
    last_name: 2
}
var newObject: any = {};
var keys = Object.keys(oldObject);
for(var key in oldObject) 
{
  let words = key.split("_");
  newObject[words[0][0].toLowerCase() + words[0].substring(1) + words[1][0].toUpperCase() + words[1].substring(1)] = oldObject[key];
}
console.log(newObject)

Here's the playground.

edited Apr 2, 2021 at 4:22

answered Apr 1, 2021 at 15:43

Deepak

2,7522 gold badges13 silver badges31 bronze badges

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

3 Comments

Tejas Mehta Over a year ago

Hi deepak, thanks for the answer. Can you help me out as to how can I rename in interface and then send to UI?

Deepak Over a year ago

Sure. If you do not want a new object but to simply rename the same object, check the updated answer.

Tejas Mehta Over a year ago

Sorry, did you update your above code? I think its still same

A Indu · Accepted Answer · 2021-04-01 03:25:20Z

0

I think you can try this approach, not sure if it will work in your case - https://levelup.gitconnected.com/spreading-resting-and-renaming-properties-in-typescript-68fb35ffb1f

answered Apr 1, 2021 at 3:25

A Indu

254 bronze badges

1 Comment

Tejas Mehta Over a year ago

I tried this const parseFromServer = ({first_name, ...remainder})=>({firstName:first_name, ...remainder}) it is giving error Binding element 'first_name' implicitly has an 'any' type.ts(7031)

Collectives™ on Stack Overflow

Typescript/ Angular - How can I rename object received from server?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related