How to change the current array format to just an array of objects format?

Question

How can I change the following data structure that is coming from the api into the desired format that is defined below?

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'
    },
    ....
    ....
    ....
  },
  { ... }
  { ... }
  { ... }
]

How can I just convert it into this an array of objects format?

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

I tried to do the following but this doesn't help much:

    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
}

Why am I not getting return all the rest of the data?

user_7486313 · Answer

Using Array#flatMap and Object#values to get one list of the objects values, and then Array#map to get the same attributes in all:

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

user_9485900 · Answer

You will need to use .flatMap and map on the items .values.

You API repsonse looks like:

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

Your state.inspectionViewAllRsData array contains these objects. The actual data you need is inside Needed_Values.

So, you need to do:

 //                             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,
        }
    }
    
  })

The reason you need to use flatMap is because each obj in your API response, will return multiple elements as per your transformed data. So, flatMap will automatically flatten the array of array of objects to array of objects.

How to change the current array format to just an array of objects format?

2 Answers