Array of Array convert to a single array of objects in javascript

Question

I hava an array of array like below:-

[
        {
            subsets:
                [
                    {
                        start: '0020', end: '007F',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                ],
            fontFormat: 'woff2',
            src: 'estPath1/',
        },
        {
            subsets:
                [
                    {
                        start: '0020', end: '007F',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                ],
            fontFormat: 'woff',
            src: 'estPath2/',
        },

    ],

If you see the subsets array key is same in both the objects of the array. The ouptut i need to get should be like below:-

[
    {
        subset: [
            {
                start: '0020', end: '007F',
            },
            {
                start: '0020', end: '007G',
            },
            {
                start: '0020', end: '007G',
            },
        ],
        webFontList: [
            {
                fontFormat: 'woff2',
                src: 'estPath1/',
            },
            {
                fontFormat: 'woff',
                src: 'estPath2/',
            },
        ],

    },
];

Im using lodash in javascript, can anyone guide me to the solution which is efficient.

My approach is to get the unique subsets array from the above array using lodash uniqueby funtion and then get all the objects from the main array having subsets key and make my custom object.

It's not an efficient solution hence looking for more ideas.

Answer 1

You can use reduce to construct the new array, having lodash to check if you have already found the same subset.

 const data = [{ subsets: [{ start: '0020', end: '007G', }, { start: '0020', end: '007F', },{ start: '0020', end: '007G', }], fontFormat: 'woff2', src: 'estPath1/', },{ subsets:[{ start: '0020', end: '007F', },{ start: '0020', end: '007G', },{ start: '0020', end: '007G', }], fontFormat: 'woff', src: 'estPath2/', }]; const merge = (data) => data.reduce((acc, { subsets, fontFormat, src }) => { const found = acc.find(({ subset }) => _.isEqual( _.sortedIndexBy(subset, ({ start, end }) => start - end), _.sortedIndexBy(subsets, ({ start, end }) => start - end)) ); if (!found) acc.push({ subset: subsets, webFontList: [{ fontFormat, src }] }); else found.webFontList.push({ fontFormat, src }); return acc; }, []); console.log(merge(data));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Answer 2

this code help to you for merge all data in your array :

let test = [
        {
            subsets:
                [
                    {
                        start: '0020', end: '007F',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                ],
            fontFormat: 'woff2',
            src: 'estPath1/',
        },
        {
            subsets:
                [
                    {
                        start: '0020', end: '007F',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                ],
            fontFormat: 'woff',
            src: 'estPath2/',
        },
        {
            subsets:
                [
                    {
                        start: '0020', end: '007F',
                    },
                    {
                        start: '0021', end: '007G',
                    },
                    {
                        start: '0020', end: '007G',
                    },
                ],
            fontFormat: 'woff',
            src: 'estPath3/',
        }
    ];
    var final = [];
    for(var i = 0; i < test.length; i++) {
        var object = {subsets : [] , webFontList: []};
        object.subsets = test[i].subsets;
        object.webFontList.push({fontFormat: test[i].fontFormat, src: test[i].src});
        for(var j = i +1; j < test.length; j++) {
            if(_.isEqual(test[i].subsets, test[j].subsets)) {
                object.webFontList.push({fontFormat: test[j].fontFormat, src: test[j].src});
                test.splice(j, 1);
            }
        }
        final.push(object);
    }
    console.log("final object is : ", final);

Answer 3

Here is the solution:

 const fontList = params.fontList.map((font) => {
        const uniquesubset = _.compact(_.map(_.uniqWith(font.webFontList, (item, itemTwo) => _.isEqual(item.subset, itemTwo.subset)).map(_.property('subset'))));
        if (uniquesubset.length > 0) {
            const subsets = uniquesubset.map((subset) => {
                const webFontList = _.compact(_.map(font.webFontList, webFont => (_.isEqual(webFont.subset, subset) ? _.pick(webFont, ['fontFormat', 'src', ]) : undefined)));
                const updatedWebFontList = _.compact(webFontList);
                return {
                    subset,
                    webFontList: updatedWebFontList,
                };
            });
            return {
                subsets,
                sourceFont: font.sourceFont,
            };
        }
        return {
            sourceFont: font.sourceFont,
            subsets: {
                webFontList: font.webFontList,
            },
        };
    });

I will further optimize it. But it provides me exactly what i needed.