Alter data in object of arrays

Question

In a React app, I have this type of data:

const data = {
  open: [{
    id: 1,
    name: 'test 1'
  }, {
    id: 2,
    name: 'test 2'
  }],
  close: [{
    id: 3,
    name: 'test 3'
  }, {
    id: 4,
    name: 'test 4'
  }]
}

I want to iterate over each object in the open and close arrays and return the existing data with additional type field. E.g.:

const data = {
  open: [{
    id: 1,
    name: 'test 1',
    type: 'alert'
  }, {...],
  close: [...]
}

I'm trying something like this, but it returns undefined instead of the altered data:

const expandData = (data) => {
  return Object.keys(data).forEach((key) => {
    return data[key].map((item, idx) => ({
      ...item,
      type: 'alert'
    }))
  })
}

// call in another method
expandData(data) // the `data` above

https://jsfiddle.net/x5aspec2/

The reason it's returning undefined is because the code is returning the result of the forEach call, which will always be undefined. (forEach has side effects, but doesn't return anything). — Sam Hasler
– Sam Hasler, Commented Dec 4, 2017 at 13:36

Sam Hasler · Accepted Answer · 2017-12-04 12:14:47Z

2

You can use reduce() instead of forEach() and return object.

const data = {"open":[{"id":1,"name":"test 1"},{"id":2,"name":"test 2"}],"close":[{"id":3,"name":"test 3"},{"id":4,"name":"test 4"}]}

function expandData (data) {
  return Object.keys(data)
    .reduce((r, k) => {
      r[k] = data[k].map(o => ({...o, type: 'alert'}))
       return r;
    }, {})
}

const result = expandData(data)
console.log(result)

edited Dec 4, 2017 at 12:14

Sam Hasler

12.7k10 gold badges74 silver badges106 bronze badges

answered Dec 4, 2017 at 11:56

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

Comments

Sam Hasler · Accepted Answer · 2017-12-04 13:43:33Z

1

You can do

const data = {
  open: [{
    id: 1,
    name: 'test 1'
  }, {
    id: 2,
    name: 'test 2'
  }],
  close: [{
    id: 3,
    name: 'test 3'
  }, {
    id: 4,
    name: 'test 4'
  }]
}

function expandData (data) {
  return Object.keys(data).reduce((a, b) => {
    a[b] = data[b].map(e => ({
      ...e,
      type: 'alert'
    }))
    return a;
  }, {});
}

const result = expandData(data)
console.log(result)

edited Dec 4, 2017 at 13:43

Sam Hasler

12.7k10 gold badges74 silver badges106 bronze badges

answered Dec 4, 2017 at 12:00

marvel308

10.5k3 gold badges24 silver badges32 bronze badges

1 Comment

Sam Hasler Over a year ago

it was the spread operator causing the error. I've checked "Use BabelJS / ES2015" in the snippet for you.

Harish Soni · Accepted Answer · 2017-12-04 12:01:44Z

0

This approach can also be followed: If you need it smiple-

const data = {
  open: [{
    id: 1,
    name: 'test 1'
  }, {
    id: 2,
    name: 'test 2'
  }],
  close: [{
    id: 3,
    name: 'test 3'
  }, {
    id: 4,
    name: 'test 4'
  }]
}

function expandData (data) {
for(let key in data){
    if(data[key] instanceof Array){
    data[key].map(obj => {
    obj.type='alert'
  })
  }
}
return data
}

const result = expandData(data)
console.log(result)

https://jsfiddle.net/Lspd8345/2/

answered Dec 4, 2017 at 12:01

Harish Soni

1,89414 silver badges28 bronze badges

Comments

Nina Scholz · Accepted Answer · 2017-12-04 12:07:07Z

0

You could vreate new object and map the array objects with new property.

const
    expandData = data => 
        Object
            .keys(data)
            .map(key =>
                Object.assign(
                    { [key]: data[key].map(o => Object.assign({}, o, { type: 'alert' })) }
                )
            ),
    data = { open: [{ id: 1, name: 'test 1' }, { id: 2, name: 'test 2' }], close: [{ id: 3, name: 'test 3' }, { id: 4, name: 'test 4' }] };

console.log(expandData(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Dec 4, 2017 at 12:07

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Rohit Agrawal · Accepted Answer · 2017-12-04 12:23:29Z

0

You just need to assign the new updated array from map to open and close properties instead of returning them.

Your whole code is correct and you need not change any method except that.

const expandData = (data) => {
  Object.keys(data).forEach((key) => {
    data[key] = data[key].map((item, idx) => ({
      ...item,
      type: 'alert'
    }))
  })
}

// call in another method
expandData(data);
console.log(data); //logs updated data

If your data is immutable than you can return a new object instead of modifying the same data object.

const expandData = (data) => {
  var result = {};
  Object.keys(data).forEach((key) => {
    result[key] = data[key].map((item, idx) => ({
      ...item,
      type: 'alert'
    }))
  })
 return result;
}
expandData(data);

edited Dec 4, 2017 at 12:23

answered Dec 4, 2017 at 12:00

Rohit Agrawal

1,52111 silver badges21 bronze badges

5 Comments

Sam Hasler Over a year ago

that is returning the result of the forEach call, which will still be undefined.

Rohit Agrawal Over a year ago

Hi @SamHasler, it does not return the data but it updates the existing data. Please check it works fine

Sam Hasler Over a year ago

That's changing expandData from a function that returns a new object to one that mutates state. It's worth pointing that out because if someone wanted to have immutable data this wouldn't be suitable.

Rohit Agrawal Over a year ago

But it's not mentioned here that the data is immutable.

Sam Hasler Over a year ago

It doesn't say it's mutable either, so it's best to play it safe and not mutate it.

Maurício Reatto Duarte · Accepted Answer · 2017-12-04 12:47:00Z

0

Try using this way, it works:

const data = {
  open: [{
    id: 1,
    name: 'test 1'
  }, {
    id: 2,
    name: 'test 2'
  }],
  close: [{
    id: 3,
    name: 'test 3'
  }, {
    id: 4,
    name: 'test 4'
  }]
}

function expandData (data) {
  let newObj = {}

    for(let key in data) {
        const objProp = data[key];
        newObj[key] = objProp.map((item, idx) => ({
              ...item,
              type: 'alert'
            }))
    }  

  return newObj;
}

const result = expandData(data)
console.log(result)

answered Dec 4, 2017 at 12:47

Maurício Reatto Duarte

1771 gold badge1 silver badge9 bronze badges

Comments

danieltan95 · Accepted Answer · 2017-12-04 11:58:55Z

-1

Try using lodash with mapValues.

_.mapValues(data, element=>element.map(child=>{
    child.type = alert
    return child
}))

https://jsfiddle.net/x5aspec2/2/

answered Dec 4, 2017 at 11:58

danieltan95

8608 silver badges15 bronze badges

Comments

Sam Hasler · Accepted Answer · 2017-12-04 13:41:38Z

Your code is returning the result of the forEach call, which will always be undefined. (forEach has side effects, but doesn't return anything).

use map instead of forEach:

const data = { open: [{ id: 1,
                        name: 'test 1'
                      }, {
                        id: 2,
                        name: 'test 2'
                      }],
               close: [{id: 3,
                        name: 'test 3'
                      }, {
                        id: 4,
                        name: 'test 4'
                      }]
             };

const expandData = (data) => {
  return Object.keys(data).map((key) => { //<-- use map here instead of forEach
    return data[key].map((item, idx) => ({
      ...item,
      type: 'alert'
    }))
  })
}

document.write('<pre>'+JSON.stringify(expandData(data),null,2)+'</pre>')

Collectives™ on Stack Overflow

Alter data in object of arrays

8 Answers 8

Comments

1 Comment

Comments

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related