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?

Majed Badawi · Accepted Answer · 2021-06-19 06:50:36Z

6

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

edited Jun 19, 2021 at 6:50

answered Jun 19, 2021 at 6:45

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaun Over a year ago

Worked like a charm. Thank you so much Majed.

vinay-deshmukh · Accepted Answer · 2021-06-19 06:57:56Z

0

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.

answered Jun 19, 2021 at 6:57

vinay-deshmukh

811 silver badge5 bronze badges

1 Comment

Shaun Over a year ago

Thank you for the great explanation Vinay. I really appreciate it.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related