Utilizing Lodash for Effective Grouping of Arrays of Objects

Question

Utilizing Lodash for Effective Grouping of Arrays of Objects

Here is an example of an array of objects:

[
    {
       item: "123",
       categories: [A,B,C]
      },
    {
       item: "456",
       categories: [B,C]
      },
      {
       item: "789",
       categories: [C,D,E]
      }
]

I'm exploring using Lodash in typescript to group this data by category and generate the following output:

[
    {
       category: A,
       Items: ["123"]
      },
      {
       category: B,
       Items: ["123","456"]
      },
      {
       category: C,
       Items: ["123","456","789"]
      },
      {
       category: D,
       Items: ["789"]
      },
      {
       category: E,
       Items: ["789"]
      }
]

typescript lodash

Answer 1

Answer №1

I can't seem to find an existing opt-in lodash function that fits your specific needs. Therefore, I have created a custom function called fn which should address your requirements.

function fn(input) {
  const allFeatures = input.reduce((features, cur) => {
    return _.uniq(_.concat(features, cur.features))
  }, [])

  return allFeatures.map(feature => ({
    feature,
    Products: input.filter(prod => prod.features.includes(feature)).map(x => x.product)
  }))
}

const input = [
  {
    product: 'ABC',
    features: [1, 2, 3]
  },
  {
    product: 'CDE',
    features: [1, 2]
  },
  {
    product: 'XYZ',
    features: [3, 4, 5]
  }
]

const expected = [
  {
    feature: 1,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 2,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 3,
    Products: ['ABC', 'XYZ']
  },
  {
    feature: 4,
    Products: ['XYZ']
  },
  {
    feature: 5,
    Products: ['XYZ']
  }
]
console.log('equal expected: ', _.isEqual(fn(input), expected))

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

or

function fn(input) {
  const allFeatures = input.reduce((features, cur) => {
    return _.uniq(_.concat(features, cur.features))
  }, [])

  return allFeatures.map(feature => ({
    feature,
    Products: input.reduce((prods, cur) => cur.features.includes(feature) ?  prods.concat(cur.product) : prods, [])
  }))
}

const input = [
  {
    product: 'ABC',
    features: [1, 2, 3]
  },
  {
    product: 'CDE',
    features: [1, 2]
  },
  {
    product: 'XYZ',
    features: [3, 4, 5]
  }
]

const expected = [
  {
    feature: 1,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 2,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 3,
    Products: ['ABC', 'XYZ']
  },
  {
    feature: 4,
    Products: ['XYZ']
  },
  {
    feature: 5,
    Products: ['XYZ']
  }
]
console.log('equal expected: ', _.isEqual(fn(input), expected))

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

I'm excited to discover if there are more efficient solutions out there.

Answer 2

I can't seem to find an existing opt-in lodash function that fits your specific needs. Therefore, I have created a custom function called fn which should address your requirements.

function fn(input) {
  const allFeatures = input.reduce((features, cur) => {
    return _.uniq(_.concat(features, cur.features))
  }, [])

  return allFeatures.map(feature => ({
    feature,
    Products: input.filter(prod => prod.features.includes(feature)).map(x => x.product)
  }))
}

const input = [
  {
    product: 'ABC',
    features: [1, 2, 3]
  },
  {
    product: 'CDE',
    features: [1, 2]
  },
  {
    product: 'XYZ',
    features: [3, 4, 5]
  }
]

const expected = [
  {
    feature: 1,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 2,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 3,
    Products: ['ABC', 'XYZ']
  },
  {
    feature: 4,
    Products: ['XYZ']
  },
  {
    feature: 5,
    Products: ['XYZ']
  }
]
console.log('equal expected: ', _.isEqual(fn(input), expected))

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

or

function fn(input) {
  const allFeatures = input.reduce((features, cur) => {
    return _.uniq(_.concat(features, cur.features))
  }, [])

  return allFeatures.map(feature => ({
    feature,
    Products: input.reduce((prods, cur) => cur.features.includes(feature) ?  prods.concat(cur.product) : prods, [])
  }))
}

const input = [
  {
    product: 'ABC',
    features: [1, 2, 3]
  },
  {
    product: 'CDE',
    features: [1, 2]
  },
  {
    product: 'XYZ',
    features: [3, 4, 5]
  }
]

const expected = [
  {
    feature: 1,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 2,
    Products: ['ABC', 'CDE']
  },
  {
    feature: 3,
    Products: ['ABC', 'XYZ']
  },
  {
    feature: 4,
    Products: ['XYZ']
  },
  {
    feature: 5,
    Products: ['XYZ']
  }
]
console.log('equal expected: ', _.isEqual(fn(input), expected))

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

I'm excited to discover if there are more efficient solutions out there.

Utilizing Lodash for Effective Grouping of Arrays of Objects

Answer №1

Similar questions

Troubleshooting Angular: Unidentified property 'clear' error in testing

Understanding the Typescript Type for a JSON Schema Object

How to call a function within a component from another component without encountering the "Cannot read property" error

Utilize JSX attributes across various HTML elements

Typescript encounters difficulty locating the designated interface

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

What is the best way to showcase a random index of an array in typescript?

Creating a customized Axios instance in Typescript can provide more flexibility and control over

create a fresh variable instead of appending it to the current object

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Starting up various modules in Angular 6 using arrays

What are some methods for utilizing the "name" attribute within React components?

What is the best way to line up a Material icon and header text side by side?

The import component path in Angular 4/TypeScript is not being recognized, even though it appears to be valid and functional

Angular 2: Harnessing the power of dynamic backlinks on landing pages!

Tips for converting JSON String data to JSON Number data

Issues with NativeScript WebView displaying HTML file

An error has been detected: An unexpected directive was found. Kindly include a @NgModule annotation

Guide on redirecting to the login page in angular2 when a process is left incomplete

Error TS2694 occurs in React when the namespace 'React' does not have an exported member. This issue typically arises when there is