Skip to content
Advertisement

Using .map() to iterate over an array of Object values and reassign to new keys

I am trying to transform the data below from:

{
      title: 'The Promise',
      blurb: 'Lorem Ipsum',
      cover_image: 'Lorem Ipsum',
      pub_year: 2002,
      genre: 'Foobar'
    }

To:

[
 {
   col1: 'The Promise',
   col2: 'Lorem Ipsum',
   col3: 'Lorem Ipsum',
   col4: 2002
   col5: 'Foobar'
 },
]

I have been puzzling away at this for quite a while and can only get it looking like this, which is just seperate objects rather than a single object as part of an array of objects (there are other book objects in the returned JSON from my db the function needs to churn through)

{col1: 1} //this is an id
{col2: 'The Promise'}
{col3: 'Lorem ipsum'}
{col4: Lorem Ipsum}
{col5: '2002'}
{col6: Foobar}

Here is the code I have been working on:

 const data = React.useMemo(
    () =>
      props.tableData.map((object, i) => {
        Object.values(object).map((value, i) => {
          let col = `col${i + 1}`
          const obj = { [col]: value }
        })
      }),
    [props.tableData]
  )

Advertisement

Answer

When mapping the values, instead of constructing an object containing a single property, return an entry pair (an array where the first value is the property, and the second value is the associated value) so that you can turn the array of entries into an object with Object.fromEntries.

const data = React.useMemo(
    () =>
        props.tableData.map((object) => (
            Object.fromEntries(
                Object.values(object).map((value, i) => [`col${i + 1}`, value])
            )
        )),
    [props.tableData]
);

This depends on the properties in your input objects being ordered. While this is usually dependable, it’s not a good thing to rely on, and won’t work if any of the properties become numeric (eg 1 or 5). Consider if the input object properties could be formatted as an (ordered) array instead.

Advertisement