Expand Array property in Object to Multiple Objects populated w/ Array value

Question

This question title is terrible but it's hard to put in words, the following example will hopefully clear things up.

I'm still learning the more advanced functions of Ramda and spent most of my day trying to get this transformation more succinct in Ramda but the ES6 version still feels more readable and short.

I was hoping a Ramda whiz could help to express this function in a better way, using less functions, maybe shorter.

Is there a better way to write this in Ramda or plain JS?
Thank you!

Update: added some extra properties to the objects as the intention is to keep those intact in the new array of objects.

Link to Ramda REPL

// For every type in bundle.types creates a new bundle obj.

const bundles = [
  {
    name: 'banana',
    input: 'src/banana.js',
    dir: 'dist',
    types: ['esm', 'umd']
  },
  {
    name: 'apple',
    input: 'src/apple.js',
    dir: 'dist',
    types: ['umd']
  }
]

/* =>
[
  {
    name: 'banana',
    input: 'src/banana.js',
    dir: 'dist',
    type: 'esm'
  },
  {
    name: 'banana',
    input: 'src/banana.js',
    dir: 'dist',
    type: 'umd'
  },
  {
    name: 'apple',
    input: 'src/apple.js',
    dir: 'dist',
    type: 'umd'
  }
]
*/

let allBundles = R.chain(R.converge(
  R.pipe(R.xprod, R.map(R.mergeAll)),
  [
    R.pipe(R.dissoc('types'), R.of),
    R.pipe(R.prop('types'), R.map(R.objOf('type')))
  ]
), bundles);

console.log('ramda');
console.log(JSON.stringify(allBundles, null, 2));

allBundles = bundles.reduce((acc, b) => {
  return acc.concat(b.types.map((type) => {
    const bundle = { ...b, type };
    delete bundle.types;
    return bundle;
  }));
}, []);

console.log('lamda')
console.log(JSON.stringify(allBundles, null, 2));

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ramda.min.js"></script>

Aadit M Shah · Accepted Answer · 2018-08-25 19:39:44Z

3

This is the perfect place to use R.chain:

const bundles = [ { name:  "banana"
                  , input: "src/banana.js"
                  , dir:   "dist"
                  , types: ["esm", "umd"]
                  }
                , { name:  "apple"
                  , input: "src/apple.js"
                  , dir:   "dist"
                  , types: ["umd"]
                  }
                ];

const unbundle = ({ types, ...rest }) =>
    types.map(type => ({ ...rest, type }));

const unbundleAll = R.chain(unbundle);

console.log(JSON.stringify(unbundleAll(bundles), null, 2));

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ramda.min.js"></script>

Here's the same thing in vanilla JS:

const bundles = [ { name:  "banana"
                  , input: "src/banana.js"
                  , dir:   "dist"
                  , types: ["esm", "umd"]
                  }
                , { name:  "apple"
                  , input: "src/apple.js"
                  , dir:   "dist"
                  , types: ["umd"]
                  }
                ];

const unbundle = ({ types, ...rest }) =>
    types.map(type => ({ ...rest, type }));

const concatMap = f => xs => [].concat(...xs.map(f));

const unbundleAll = concatMap(unbundle);

console.log(JSON.stringify(unbundleAll(bundles), null, 2));

Hope that helps.

edited Aug 25, 2018 at 19:39

answered Aug 25, 2018 at 19:12

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

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

3 Comments

luwes Over a year ago

Thanks, this is awesome! Only concern is that all the prop names are listed, it would be great if it would automatically include properties that were added later without refactoring the function...

Aadit M Shah Over a year ago

@luwes Edited. Now you don't need to list all the property names.

luwes Over a year ago

Wow great use of the object spread to exclude, didn't think of that. Thanks, accepted!

Adeel Imran · Accepted Answer · 2018-08-25 15:59:10Z

1

const bundles = [
    { name: 'banana', types: ['esm', 'umd'] },
    { name: 'apple', types: ['umd'] }
];

let newArray = [];
bundles.forEach(bundle => {
    bundle.types.map(type => {
      newArray.push({ name: bundle.name, type })
    });
});
console.log(newArray);

This will output =>
[
  {
   "name": "banana",
   "type": "esm"
  },
  {
    "name": "banana",
    "type": "umd"
  },
  {
    "name": "apple",
    "type": "umd"
  }
]

answered Aug 25, 2018 at 15:59

Adeel Imran

14k8 gold badges66 silver badges80 bronze badges

Comments

Sylwester · Accepted Answer · 2018-08-25 20:17:54Z

1

I'm not good in Ramda, but in JS I see potential:

const allBundles = bundles.reduce(
    (acc, { types, ...attrs}) => 
        [...acc, ...types.map((type) => ({...attrs, type }))], []);

const bundles = [
    { name: 'banana', types: ['esm', 'umd'] }, 
    { name: 'apple', types: ['umd'] },
];

console.log('lamda')
console.log(JSON.stringify(allBundles, null, 2));

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ramda.min.js"></script>

This would have looked slightly better with flaMap.

edited Aug 25, 2018 at 20:17

answered Aug 25, 2018 at 16:23

Sylwester

48.9k4 gold badges52 silver badges83 bronze badges

2 Comments

luwes Over a year ago

Thanks @Sylwester, your answer looks good only the goal is to keep all props intact from the object, it could have any number of props. It wasn't so clear first, I added some more props to the objects.

Sylwester Over a year ago

@luwes like this?

Thomas Junk · Accepted Answer · 2018-08-25 16:11:56Z

0

In JS I would go for:

const bundles = [
    {
        name: 'banana',
        types: ['esm', 'umd']
    },
    {
       name: 'apple',
       types: ['umd']
    }
];

const expanded = (arr) => {
    return arr.reduce((o,n)=>{
     let result = n.types.map((t)=>{
      return {name:n.name, type:t}
     });
     o = [...o,...result];
     return o;
    }, []);
}

Here is the fiddle.

Explanation: What you want is an array, of objects (therefore reduce to collect the result), which are build by a collection built from a map over the types.

I have no knowledge of RamdaJS

From looking at the documentation, a transformation with Ramda using R.Reduce and R.map should be straigthforward.

In order to get the types, you could leverage pluck.

edited Aug 25, 2018 at 16:11

answered Aug 25, 2018 at 16:03

Thomas Junk

5,6962 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

Expand Array property in Object to Multiple Objects populated w/ Array value

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related