展平数组，但使用子数组作为基础

Question

We are trying to take an array that has this format:

[
{batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}],
{batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}],
]

and flatten it so it is expressed as:

[
{batchId: 123, fileName: 'fileA.txt'},
{batchId: 123, fileName: 'fileB.txt'},
{batchId: 456, fileName: 'fileC.txt'},
{batchId: 456, fileName: 'fileD.txt'},
]

We are hoping that there is a more elegant way to transform this data using pre-existing library such as Ramda or Lodash, however any javascript implementation would be fine.

Answer 1

You could use reduce() and map() methods and return new array.

 const data = [ {batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]}, {batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]}, ] const result = data.reduce((r, e) => { r.push(...e.files.map(o => Object.assign({}, o, {batchId: e.batchId}))) return r; }, []) console.log(result) 

Answer 2

With ES6, you can use nested Array.map() calls and flatten the resulting sub-arrays by spreading into Array.concat() :

 const data = [{batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]},{batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]}]; const result = [].concat(... data.map(({ batchId, files }) => files.map(({ fileName }) => ({ batchId, fileName }) ))); console.log(result); 

Answer 3

 var arr = [ {batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]}, {batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]}, ]; function flatten(array) { return array.reduce(function(newArray, item) { return newArray.concat(item.files.map(function(file) { return { batchId: item.batchId, fileName: file.fileName }; })); }, []); } console.log(flatten(arr)); 

Answer 4

Another approach to this is to use R.chain , which effectively maps the provided function over the list to produce a list of lists and then flattens the result.

 const data = [ {batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]} , {batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]} ] const fn = R.chain(({batchId, files}) => R.map(R.assoc('batchId', batchId), files)) console.log(fn(data)) 

 <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script> 

At some point in the future you will likely be able to make use of the proposed Array.prototype.flatMap instead of R.chain .

Answer 5

You can also use reduce() , the spread operator , map() and Object.assign() you can achieve your required result.

DEMO

 const arr = [{ batchId: 123, files: [{ fileName: 'fileA.txt' }, { fileName: 'fileB.txt' }] }, { batchId: 456, files: [{ fileName: 'fileC.txt' }, { fileName: 'fileD.txt' }] }]; let result = arr.reduce((r, o) => { return [...r, ...o.files.map(v => { return Object.assign(v, { batchId: o.batchId }); })]; }, []); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }