reactjs 在javascript中的现有对象中添加对象

tv6aics1  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(129)

我们有一个名为options的对象。我想在options中添加那些值,这些值在基于id的object2中不存在。

options
0: {value: '642a60e2573c9d004b041407', label: 'label1', mapped: true}
1: {value: '642a60e2573c9d004b041408', label: 'label2', mapped: true}
2: {value: '642a60e2573c9d004b041409', label: 'label3', mapped: true}
3: {value: '642a60e2573c9d004b04140a', label: 'label4', mapped: true}
4: {value: '642a60e2573c9d004b04140b', label: 'label5 ', mapped: true}
5: {value: '642a60e2573c9d004b04140c', label: 'label6', mapped: true}

object2 = 
642a60e2573c9d004b04140a: {id: '642a60e2573c9d004b04140a', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null}
642a60e2573c9d004b04140b: {id: '642a60e2573c9d004b04140b', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null}
642a60e2573c9d004b04140c: {id: '642a60e2573c9d004b04140c', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null,}
642a60e2573c9d004b04140d: {id: '642a60e2573c9d004b04140d', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null, }
642a60e2573c9d004b04140e: {id: '642a60e2573c9d004b04140e', createdAt: '2023-04-03T05:15:14.317Z', myApiName: null, abel: null, }
642a60e2573c9d004b04140f: {id: '642a60e2573c9d004b04140f', createdAt: '2023-04-03T05:15:14.317Z', myApiName: null, abel: null, }
642a60e2573c9d004b041407: {id: '642a60e2573c9d004b041407', createdAt: '2023-04-03T05:15:14.315Z', myApiName: null, abel: null, }
642a60e2573c9d004b041408: {id: '642a60e2573c9d004b041408', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null, }
642a60e2573c9d004b041409: {id: '642a60e2573c9d004b041409', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null, }
642a6123573c9d0024a992f2: {id: '642a6123573c9d0024a992f2', createdAt: '2023-04-03T05:16:19.896Z', myApiName: null, abel: null, }

因为,我是新的JS,任何帮助将不胜感激。
预期结果:

options
        0: {value: '642a60e2573c9d004b041407', label: 'label1', mapped: true}
        1: {value: '642a60e2573c9d004b041408', label: 'label2', mapped: true}
        2: {value: '642a60e2573c9d004b041409', label: 'label3', mapped: true}
        3: {value: '642a60e2573c9d004b04140a', label: 'label4', mapped: true}
        4: {value: '642a60e2573c9d004b04140b', label: 'label5 ', mapped: true}
        5: {value: '642a60e2573c9d004b04140c', label: 'label6', mapped: true}
        6: {value: '642a6123573c9d0024a992f2', label: 'label7', mapped: true}
        7: {value: '642a60e2573c9d004b04140d', label: 'label5 ', mapped: true}
        8: {value: '642a60e2573c9d004b04140e', label: 'label6', mapped: true}
        9: {value: '642a60e2573c9d004b04140f', label: 'label7', mapped: true}```
elcex8rz

elcex8rz1#

您可以Map选项对象并添加其他对象中的元素。这可能会解决您的问题。

const optionsMap = options.map(option => {
  return {
    ...option,
    ...object2.find(obj => obj.id === option.value)
  }
});
options = [{
  value: '642a60e2573c9d004b041407',
  label: 'label1',
  mapped: true
}, {
  value: '642a60e2573c9d004b041408',
  label: 'label2',
  mapped: true
}, {
  value: '642a60e2573c9d004b041409',
  label: 'label3',
  mapped: true
}, {
  value: '642a60e2573c9d004b04140a',
  label: 'label4',
  mapped: true
}, {
  value: '642a60e2573c9d004b04140b',
  label: 'label5 ',
  mapped: true
}, {
  value: '642a60e2573c9d004b04140c',
  label: 'label6',
  mapped: true
}, ]

object2 = [{
    id: '642a60e2573c9d004b04140a',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null
  }, {
    id: '642a60e2573c9d004b04140b',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null
  }, {
    id: '642a60e2573c9d004b04140c',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b04140d',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b04140e',
    createdAt: '2023-04-03T05:15:14.317Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b04140f',
    createdAt: '2023-04-03T05:15:14.317Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b041407',
    createdAt: '2023-04-03T05:15:14.315Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b041408',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a60e2573c9d004b041409',
    createdAt: '2023-04-03T05:15:14.316Z',
    myApiName: null,
    abel: null,
  },
  {
    id: '642a6123573c9d0024a992f2',
    createdAt: '2023-04-03T05:16:19.896Z',
    myApiName: null,
    abel: null,
  }
];

const optionsMap = options.map(option => {
  return {
    ...option,
    ...object2.find(obj => obj.id === option.value)
  }
});
console.log('result', optionsMap);
b09cbbtk

b09cbbtk2#

我找到了这个解决方案,它正在工作,你可以参考这个

console.log(options);
var addNewItem = true;
Object.entries(object2).forEach((ele, index) => {
    addNewItem = true;
    Object.entries(options).forEach((item, inx) => {
        if (item[1].value == ele[1].id) {
            addNewItem = false;
            return false;
        }
    })
    if (addNewItem) {
        var keyVal = Object.keys(options).length;
        let newobj={[keyVal]: { value: ele[1].id, label: "newLable", mapped: true }}
        options = Object.assign(options, newobj)
    }
})

console.log(options);

相关问题