Objects with data into object with list of keys and values - javascript

Question

I'm struggling with serializing data into a new structure and hope to find a better solution for it.

I have data that comes from API in this structure:

  const filters = {
     category: ['Football', 'Soccer'],
     subcategory: ['Tactic', 'Frighting'],
     action: ['Kicking', 'Shooting']
  };

And I want to convert it into this structure:

const options = {
category: [
    {
        value: 'Football',
        label: 'Football'
    },
    {
        value: 'Soccer',
        label: 'Soccer'
    }
],
subCategory: [
    {
        value: 'Tactic',
        label: 'Tactic'
    },
    {
        value: 'Frighting',
        label: 'Frighting'
    }
],
action: [
    {
        value: 'Kicking',
        label: 'Kicking'
    },
    {
        value: 'Shooting',
        label: 'Shooting'
    }
]
};

Help is appreciated! Thanks.

Answer 1

Using reduce and map you can loop over the object and transform it.

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const keyConversion = { subcategory: 'subCategory' } const result = Object.entries(filters).reduce((obj, [key, arr]) => { const mappedKey = keyConversion[key] || key; obj[mappedKey] = arr.map(val => ({ name: val, value: val })); return obj; }, {}); console.log(result);

Answer 2

You could do it like :

let options = Object.keys(filters).map(key => {
  return {
    [key]: filters[key].map(filter => {
      return {
        value: filter,
        label: filter
      }
    })

  }
})

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] } let options = Object.keys(filters).map(key => { return { [key]: filters[key].map(filter => { return { value: filter, label: filter } }) } }) console.log(options)

Answer 3

Use for..in to iterate over Object and .map array helper

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const result = {} for (key in filters) { result[key] = filters[key].map(v => ({value: v, label: v})) } console.log(result)

Answer 4

You can map the entires of the object to a new [key, value] entries, where the value is a mapped version of your arrays. Once you have the new [key, value] pair arrays you can use Object.fromEntries() to build your resulting object:

 const filters = {category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const res = Object.fromEntries(Object.entries(filters).map( ([k, arr]) => [k, arr.map(v => ({value:v, label:v}))] )); console.log(res);

Answer 5

Thanks for everyone, I've used this way finally:

  const { ...sportFilters } = queryData;
  const filterKeys = keys(sportFilters);
  const filterOptions = reduce(
    filterKeys,
    (acc, key) => {
       return {
         ...acc,
         [key]: map(sportFilters[key], value => ({
         value,
         label: value
       }))
     };
   },
 {}
);