# how to change the key of object to an array or another key?

**URL:** <https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147>\
**Category:** Help\
**Created:** [November 14, 2020, 3:58pm UTC](https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147 "2020-11-14T15:58:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Heli](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/heli/32/3847_2.png) [@Heli](https://talk.observablehq.com/u/Heli)\
**Post date:** [November 14, 2020, 3:58pm UTC](https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147/1 "2020-11-14T15:58:14Z")

</div>

Dear all, the codes like follows:

[https://observablehq.com/d/688b78aab7723664](https://observablehq.com/d/688b78aab7723664)

what should I do if I want to change the key ‘step’ of all these 9 objects to an array like [0,1,2], or to another key, like ‘step\_2’, by writing codes, rather than change it directly in the data files?

---

<div class="post-metadata">

**Author:** ![DanielKerrigan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/danielkerrigan/32/2958_2.png) [@DanielKerrigan](https://talk.observablehq.com/u/DanielKerrigan)\
**Post date:** [November 14, 2020, 7:29pm UTC](https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147/2 "2020-11-14T19:29:30Z")

</div>

You could do this by passing a [row conversion function](https://github.com/d3/d3-dsv#dsv_parse) to `d3.csvParse`:

```javascript
data = d3.csvParse(await mat.text(), row => {
  row['step'] = [1, 2, 3];
  return row;
})  

```

```auto
data = d3.csvParse(await mat.text(), row => {
  return {
    step_2: row.step,
    temp: row.temp,
    SR: row.SR,
    mis: row.mis,
    Tmax: row.Tmax
  }
})

```

Or, you could use [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to do this:

```javascript
updatedData = data.map(d => {
  // shallow copy so that we don't modify the objects in `data`
  const obj = {...d};
  obj['step'] = [0, 1, 2];
  return obj;
})

```

```javascript
data.map(d => {
  // shallow copy so that we don't modify the objects in `data`
  const obj = {...d};
  // create a new key value pair
  obj['step_2'] = obj['step'];
  // delete the old key value pair
  delete obj['step'];
  return obj;
})

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 14, 2020, 7:58pm UTC](https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147/3 "2020-11-14T19:58:29Z")

</div>

You can use destructuring to transform your objects:

```javascript
data = (await FileAttachment("Book1.csv").csv())
  .map(({step, ...o}, i) => ({
    ...o,
    [`step_${i}`]: [1,2,3]
  }))

```

In detail:

```javascript
(await FileAttachment("Book1.csv").csv())

```

There’s no need to use d3.csvParse, it’s built into FileAttachment already. Because the return value is a promise, we use `await` to obtain and pass on the eventual value.

```javascript
.map(({step, ...o}, i) => ({

```

Here we destructure each entry, filtering out the `step` property. All remaining properties end up in `o`. Note the `({`, indicating that we straight away return an object.

```javascript
    ...o,

```

Destructure `o` into the new object, i.e., copy over all keys and values.

```javascript
    [`step_${i}`]: [1,2,3]

```

Set a dynamic property `step_${i}`. Assign the property the array `[1, 2, 3]`.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [November 14, 2020, 9:02pm UTC](https://talk.observablehq.com/t/how-to-change-the-key-of-object-to-an-array-or-another-key/4147/4 "2020-11-14T21:02:27Z")

</div>

Thanks @mootari! I often wish I had a helpful person to talk through code in exactly this way!