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

The PWA application is experiencing crashes on Safari following the recent IOS 17 update

Reactive form within a form

Angular EventEmitter fails to emit event

Conceal object from inventory upon clicking

Querying Multipolygons in Ruby on Rails using PostGIS

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Enhance your Angular app by dynamically adding classes to existing classes on a host component

I encountered a conflict with the FOREIGN KEY constraint while attempting to execute the INSERT statement in the frontend application. However, the same statement successfully runs

Adding cache to Observable in mat-autocomplete can improve performance by reducing redundant API calls

The StreamingTextResponse feature is malfunctioning in the live environment

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

Unable to access Angular 6 Application running on AWS EC2 instance via public IP address

There is no corresponding version available for [email protected] in Angular 6

How can I effectively build an Angular Library containing various components?

Encountering issues when verifying the ID of Angular route parameters due to potential null or undefined strings

Transmitting data from Angular to .NET Core for seamless integration

Conceal the header on signup and login pages using Material UI

extract keys and values from an array of objects

Angular is giving me an undefined Array, even though I clearly defined it beforehand