TypeScript- How to add a Key Value pair to each object in an Array?

Question

I have an array of dates and an array of objects. I'd like to add the dates to the array of objects as a key value pair {"Date": "10-12-18"}.

dates:

["10-12-18", "10-13-18", 10-14-18"]

data:

[
   {"name":"One", "age": "4"},
   {"name":"Two", "age": "5"},
   {"name":"Three", "age": "9"}
]

I want something like...

[
    {"name":"One", "age": "4", "Date": "10-12-18"},
    ....

How can I do this in TypeScript? I'm used to normal JavaSCript and can't get it right.

Something I have so far:

for (let idx of data){
   data[idx].date = dates[idx] 
}

Thanks!!

do it like in JS, typescript should compile vanilla JS without problem — jonatjano
– jonatjano, Commented Aug 27, 2018 at 15:24
Can you post the code you were using? Doing this in Javascript should be no different from doing it in Typescript. So if it wasn't working in JS, you are probably doing something wrong and typescript won't fix that — smac89
– smac89, Commented Aug 27, 2018 at 15:25
"I'm used to normal JavaSCript and can't get it right." What have your non-right solutions looked like? — T.J. Crowder
– T.J. Crowder, Commented Aug 27, 2018 at 15:25

ibrahim mahrir · Accepted Answer · 2018-08-27 15:40:58Z

4

What's wrong with your code is that idx will be the object not the index as you are using for...of. Use a simple regular for like:

for(let idx = 0; idx < data.length; idx++) {
    data[idx].date = dates[idx];
}

Or use forEach to loop one of the arrays and use the index it provides to get the value from the other array:

data.forEach((obj, i) => obj.date = dates[i]);

edited Aug 27, 2018 at 15:40

answered Aug 27, 2018 at 15:26

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

2 Comments

Devstar34 Over a year ago

Perfect and concise, thank you. I need to get the hang of transitioning into TypeSCript more. it's good to see the two things side by side!

ibrahim mahrir Over a year ago

@LaurenAH Actually this is still valid javascript as well.

Arup Rakshit · Accepted Answer · 2018-08-27 15:30:17Z

3

const result = data.map(({ name, age }, index) => ({ name, age, date: dates[index] }));

just map the array to the result.

edited Aug 27, 2018 at 15:30

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

answered Aug 27, 2018 at 15:26

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Henrique Souza · Accepted Answer · 2018-08-27 15:33:07Z

2

Something like that:

    let dates = ["10-12-18", "10-13-18", "10-14-18"];

    let objs = [{"name":"One",
     "age": "4"},

     {"name":"Two",
     "age": "5"},

    {"name":"Three",
     "age": "9"}
    ]

    const result = objs.map((item, index) => {
        item.Date = dates[index];
        return item;
    });

console.log(result);

answered Aug 27, 2018 at 15:33

Henrique Souza

494 bronze badges

1 Comment

ibrahim mahrir Over a year ago

BTW, using map is totally unecessary here as you are altering the original objects so a simple forEach will do. console.log(objs); to see what I'm talking about.

Thomas Fortin · Accepted Answer · 2023-05-05 09:51:35Z

1

According to @Jonas Wilms answer,I think that the map operator is the best solution.

You can also use the spread operator instead of destructuring the object, like this :

const data = [
   { 'name':'One', 'age': '4' },
   { 'name':'Two', 'age': '5' },
   { 'name':'Three', 'age': '9' }
];

const dates = ['10-12-18', '10-13-18', '10-14-18'];

const result = data.map((object, index) => ({ ...object, date: dates[index] }));

In case of long objects, it avoids you to rewrite every key of your object.

answered May 5, 2023 at 9:51

Thomas Fortin

2931 gold badge4 silver badges11 bronze badges

Comments

Arup Rakshit · Accepted Answer · 2018-08-27 15:28:38Z

0

In TS, you can do this like below..

var data = [{
    "name": "One",
    "age": "4"
  },

  {
    "name": "Two",
    "age": "5"
  },

  {
    "name": "Three",
    "age": "9"
  }
];

var dates = ["10-12-18", "10-13-18", "10-14-18"];

console.log(data.map((ob, i) => ({ ...ob,
  "Date": dates[i]
})));

answered Aug 27, 2018 at 15:28

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

Collectives™ on Stack Overflow

TypeScript- How to add a Key Value pair to each object in an Array?

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related