Question

在React应用程序中，我有这种类型的数据：

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

我想迭代open和close数组中的每个对象，并使用其他type字段返回现有数据。 E.g：

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

我正在尝试这样的事情，但它会返回undefined而不是更改的数据：

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/

Answer 1

您可以使用reduce()代替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"}]}

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)

Answer 2

你可以做到

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)

Answer 3

您只需将新更新的数组从map分配到open和close属性，而不是返回它们。

您的整个代码都是正确的，您无需更改除此之外的任何方法。

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

如果您的数据是不可变的，那么您可以返回一个新对象，而不是修改相同的data对象。

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

Answer 4

也可以采用这种方法： 如果你需要它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/

Answer 5

您可以创建新对象并使用新属性映射数组对象。

＆＃13;

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));

＆＃13;

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

＆＃13;

Answer 6

尝试使用这种方式，它可以工作：

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)

Answer 7

您的代码返回forEach调用的结果，该结果将始终未定义。（forEach有副作用，但不会返回任何东西）。

使用map代替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>')

Answer 8

尝试将lodash与mapValues一起使用。

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

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

改变数组对象中的数据

8 个答案: