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

Posted 2023-02-22

【中文标题】如何将当前数组格式更改为对象数组格式？

【英文标题】：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

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

【参考方案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 的精彩解释。我真的很感激。