如何将当前数组格式更改为对象数组格式？答案

【问题标题】：How to change the current array format to just an array of objects format?如何将当前数组格式更改为对象数组格式？
【发布时间】：2021-09-03 17:30:15
【问题描述】：

如何将来自 api 的以下数据结构更改为下面定义的所需格式？

inspectionViewAllRs = [
  {
    INSPN_XFER_SEQ_NR: {
      value: '5'
    },
    FNRL_FLG: {
      label: 'No',
      value: 'N'
    },
    HAS_PAST_INSPN: {
      value: '3'
    },
    MTG_CO_PHN_AREA_CD: {
      value: ''
    },
    DECLARATION_CD: {
      label: 'US Citizen/Non-Citizen National',
      value: 'CZ'
    },
    ....
    ....
    ....
  },
  { ... }
  { ... }
  { ... }
]

我怎样才能把它转换成这个对象数组格式？

inspectionViewAllRs = [
  { label: "", value: '5' },
  { label: "No", value: "N" },
  { label: "", value: "3" },
  { label: "", value: "" },
  { label: "US Citizen/Non-Citizen National", value: "CZ" },
  ....
  ....
  ....
]

我尝试执行以下操作，但这并没有多大帮助：

    if(!_.isEmpty(this.state.inspectionViewAllRsData)) {
  const result = this.state.inspectionViewAllRsData.map((data, i) => {
    const items = Object.values(data);
    const newItem = {}
    newItem.label = items[i].label;
    newItem.value = items[i].value;
    
    return newItem
  })

  console.log("result ", result)
  
  // this is what I see printed out in console log
  // result (5) [{…}, {…}, {…}, {…}, {…}]
              0: {label: undefined, value: "5"}
              1: {label: "No", value: "N"}
              2: {label: undefined, value: "3"}
              3: {label: undefined, value: ""}
              4: {label: "", value: ""}
              length: 5
}

为什么我没有返回所有其余的数据？

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

使用Array#flatMap 和Object#values 得到一个对象值列表，然后Array#map 得到所有相同的属性：

const inspectionViewAllRs = [
  {
    INSPN_XFER_SEQ_NR: { value: '5' },
    FNRL_FLG: { label: 'No', value: 'N' },
    HAS_PAST_INSPN: { value: '3' },
    MTG_CO_PHN_AREA_CD: { value: '' },
    DECLARATION_CD: { label: 'US Citizen/Non-Citizen National', value: 'CZ' },
  },
  {
    DECLARATION_CD: { label: 'US Citizen/Non-Citizen National', value: 'CZ' },
  }
];

const res = inspectionViewAllRs
  .flatMap(Object.values) // get one list of objects
  .map(({ label = '', value = '' }) => ({ label, value })); // return list of label/value objects

console.log(res);

【讨论】：

工作就像一个魅力。非常感谢 Majed。

【解决方案2】：

您需要使用 .flatMap 并映射到项目 .values。

您的 API 响应如下所示：

[
{ unneeded_keys: Needed_Values}, //objectOfData
{ unneeded_keys: Needed_Values},
{ unneeded_keys: Needed_Values},
]

您的state.inspectionViewAllRsData 数组包含这些对象。您需要的实际数据在Needed_Values 中。

所以，你需要这样做：

 //                             Note: flatMap here \/\/\/
 const result = this.state.inspectionViewAllRsData.flatMap((objectOfData) => {
    const items = Object.values(data);
    return items.map((item, i) => {
       return {
           label: item.label ?? '', // handle case when label is undefined
           value: item.value,
        }
    }
    
  })

您需要使用flatMap 的原因是因为您的 API 响应中的每个 obj 都会根据您转换的数据返回多个元素。所以，flatMap 会自动将对象数组扁平化为对象数组。

【讨论】：

感谢您对 Vinay 的精彩解释。我真的很感激。