What is the best way to split a single object into two separate objects based on a specific value within the object using lodash?

Question

What is the best way to split a single object into two separate objects based on a specific value within the object using lodash?

Imagine a scenario with an object containing two channels in Dutch (NL) language and one channel in English (EN) language:

[
    {
        "name": "De Redactie",
        "channels": [
            {
                "name": "headlines",
                "pubDate": "2017-05-15 09:15:00",
                "language": "nl",
                "items": [

                ]
            },
            {
                "name": "headlines English",
                "pubDate": "2017-05-14 18:05:00",
                "language": "en",
                "items": [

                ]
            },
            {
                "name": "politiek",
                "pubDate": "2017-05-14 20:11:00",
                "language": "nl",
                "items": [

                ]
            }
        ]
    }
]

How can I rearrange them to achieve this desired outcome:

[
    {
        "name": "De Redactie",
        "channels": [
            {
                "name": "headlines",
                "pubDate": "2017-05-15 09:15:00",
                "language": "nl",
                "items": [

                ]
            },
            {
                "name": "politiek",
                "pubDate": "2017-05-14 20:11:00",
                "language": "nl",
                "items": [

                ]
            }
        ]
    },
    {
        "name": "De Redactie",
        "channels": [
            {
                "name": "headlines English",
                "pubDate": "2017-05-14 18:05:00",
                "language": "en",
                "items": [

                ]
            }
        ]
    }
]

Please note that the data provided is for illustration purposes. The actual data may have multiple entries of different languages.

I have attempted to solve this using lodash functions and complex forEach loops, but haven't found the right approach yet.

An ideal solution would be utilizing lodash or typescript, considering I am working within Angular 4 environment.

arrays angular typescript object lodash

Answer 1

Answer №1

Loop through the array using Array#map. Extract the channel arrays for each object by utilizing object destructuring along with object rest syntax. Traverse through the channels via Array#reduce, grouping channels based on language into a Map. Convert it back to an array by spreading the iterator of Map's values.

Generate an array of objects by mapping them and setting the group as the channels property of the object. Flatten the array by spreading into Array#concat:

const data = [{"name":"De Redactie","channels":[{"name":"headlines","pubDate":"2017-05-15 09:15:00","language":"nl","items":[]},{"name":"headlines English","pubDate":"2017-05-14 18:05:00","language":"en","items":[]},{"name":"politiek","pubDate":"2017-05-14 20:11:00","language":"nl","items":[]}]}];

const result = [].concat(...data.map(({ channels, ...rest }) => {
  const channelGroups = [...channels.reduce((m, channel) => {
    m.has(channel.language) || m.set(channel.language, []);
    m.get(channel.language).push(channel);
  
    return m;
  }, new Map()).values()];
  
  return channelGroups.map((channels) => ({
    ...rest,
    channels
  }));
}));

console.log(result);

Answer 2

Loop through the array using Array#map. Extract the channel arrays for each object by utilizing object destructuring along with object rest syntax. Traverse through the channels via Array#reduce, grouping channels based on language into a Map. Convert it back to an array by spreading the iterator of Map's values.

Generate an array of objects by mapping them and setting the group as the channels property of the object. Flatten the array by spreading into Array#concat:

const data = [{"name":"De Redactie","channels":[{"name":"headlines","pubDate":"2017-05-15 09:15:00","language":"nl","items":[]},{"name":"headlines English","pubDate":"2017-05-14 18:05:00","language":"en","items":[]},{"name":"politiek","pubDate":"2017-05-14 20:11:00","language":"nl","items":[]}]}];

const result = [].concat(...data.map(({ channels, ...rest }) => {
  const channelGroups = [...channels.reduce((m, channel) => {
    m.has(channel.language) || m.set(channel.language, []);
    m.get(channel.language).push(channel);
  
    return m;
  }, new Map()).values()];
  
  return channelGroups.map((channels) => ({
    ...rest,
    channels
  }));
}));

console.log(result);

Answer 3

Answer №2

Here is a way to achieve the same result using lodash:

const result = _.chain(arr)
    .flatMap(item => _.map( // retrieve array of channels with parent name
        item.channels,
        channel => _.assign({}, channel, { parentName: item.name })
    ))
    .groupBy('language') // group channels by language
    .values() // obtain arrays of channels for each language
    .map(langArrs => ({ // create final structure
        name: _.first(langArrs).parentName, // get name for language channels
        channels: _.omit(langArrs, ['parentName']) // exclude parent name from channels
    }))
    .value();

Answer 4

Here is a way to achieve the same result using lodash:

const result = _.chain(arr)
    .flatMap(item => _.map( // retrieve array of channels with parent name
        item.channels,
        channel => _.assign({}, channel, { parentName: item.name })
    ))
    .groupBy('language') // group channels by language
    .values() // obtain arrays of channels for each language
    .map(langArrs => ({ // create final structure
        name: _.first(langArrs).parentName, // get name for language channels
        channels: _.omit(langArrs, ['parentName']) // exclude parent name from channels
    }))
    .value();

What is the best way to split a single object into two separate objects based on a specific value within the object using lodash?

Answer №1

Answer №2

Similar questions

Is there a workaround for the React useContext issue in Typescript aside from using <Partial>?

Unauthorized Access: JWT Express API fails to authenticate the HTTPInterceptor header

Enhance your React application by using a personalized hook that allows you to trigger a function

The firebase.d.ts on iOS functions properly, whereas on Android, it becomes

Purge the inversify-js container and fetch fresh service instances

Struct object not found within nested array during JSON unmarshaling

hosting on a base URL does not activate cloud functions

Utilize the ngClass directive in conjunction with ngFor loop functionality

Encountering "module not found" errors while working on an Angular 2 project using the angular2-seed starter pack

What is the process of accessing the changelog.md file within a component in Angular?

Implementing asynchronous validation in Angular 2

The module imported by Webpack appears to be nothing more than a blank

Iterating through a JSON object that contains an array nested within another array using PHP foreach loop

Get an angular xml file by utilizing the response from a C# web API download

Issue with Angular 7: "Unspecified name attribute causing control not found"

During the process of adding a new template to my Angular project, I came across an issue within the core.min.js and script.js files

When a reaction function is triggered within a context, it will output four logs to the console and

What is the best way to display the information stored in a nested JSON hash table onto a PowerShell output?

Verify internet connectivity with Ionic

The ts-mocha test does not play well with the use of node-fetch library