Generating an array of keys from duplicated values in Typescript

Question

Generating an array of keys from duplicated values in Typescript

My data is structured in the following array format:

  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },

I am seeking to reformat this data into a key-value map, using itemFamily as the key. The transformed output should resemble this structure:

{ Asset:  
   [ { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Asset' }, 
     { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Asset' } ], 
  Periodic:  
   [ { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Periodic' }, 
     { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Periodic' } ] 
}

Any suggestions on how I can achieve this transformation?

javascript arrays typescript

Answer 1

Answer №1

Here's a sample code snippet for utilizing the reduce method:

const result = yourArray.reduce((accumulator, item) => {
  if (!accumulator[item.family]) { 
    accumulator[item.family] = [];
  }
  accumulator[item.family].push(item);
  return accumulator;
}, {});

Answer 2

Here's a sample code snippet for utilizing the reduce method:

const result = yourArray.reduce((accumulator, item) => {
  if (!accumulator[item.family]) { 
    accumulator[item.family] = [];
  }
  accumulator[item.family].push(item);
  return accumulator;
}, {});

Answer 3

Answer №2

To start off, the key is to eliminate any illegal states.

This means that the Asset property should only include elements from the Asset family. Refer to the type Result

type Family = 'Asset' | 'Periodic';

interface Item {
  itemTitle: string,
  itemType: string,
  itemDescription: string,
  itemFamily: string,
}
const data: Item[] = [
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
]

type Result = Record<string, Item[]>

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

const handleProperty = (acc: Record<string, Item[]>, elem: Item) =>
  hasProperty(acc, elem.itemFamily) ? [...acc[elem.itemFamily], elem] : [elem]

const builder = (data: Item[]) =>
  data.reduce<Result>((acc, elem) => ({
    ...acc,
    [elem.itemFamily]: handleProperty(acc, elem)
  }), {})

const result = builder(data)

Playground

Answer 4

To start off, the key is to eliminate any illegal states.

This means that the Asset property should only include elements from the Asset family. Refer to the type Result

type Family = 'Asset' | 'Periodic';

interface Item {
  itemTitle: string,
  itemType: string,
  itemDescription: string,
  itemFamily: string,
}
const data: Item[] = [
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
]

type Result = Record<string, Item[]>

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

const handleProperty = (acc: Record<string, Item[]>, elem: Item) =>
  hasProperty(acc, elem.itemFamily) ? [...acc[elem.itemFamily], elem] : [elem]

const builder = (data: Item[]) =>
  data.reduce<Result>((acc, elem) => ({
    ...acc,
    [elem.itemFamily]: handleProperty(acc, elem)
  }), {})

const result = builder(data)

Playground

Answer 5

Answer №3

This code snippet provides a solution using the reduce method:

const result = myArr.reduce((acc, val) => {
  acc[val.group] = [...(acc[val.group] || []), val];
  return acc;
}, {});

Answer 6

This code snippet provides a solution using the reduce method:

const result = myArr.reduce((acc, val) => {
  acc[val.group] = [...(acc[val.group] || []), val];
  return acc;
}, {});

Generating an array of keys from duplicated values in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Why do I receive the error message "Error: Objects are not valid as a React child (found: [object Promise])" in NextJS13?

NodeJs encountered an issue due to the absence of defined username and data

Getting the value from a .sh (Shell Script) file in React: How to do it?

Panel that collapses and increments its ID each time within my loop

Click anywhere outside the sidemenu to close it

Unable to click, but can only be activated by touchstart or mousedown

Instructions for saving a binary file on the client using jQuery's .post function

Updating the color of specific buttons using ngFor in Typescript and Angular 8

Unable to display data retrieved from JSON file

Issue encountered when attempting to convert JSON string into a collection

Incorporate external JavaScript libraries not built with Angular

Encountering a syntax error while attempting to import modules from amCharts

Enrollment of Vue components

What could be causing my AJAX code to fail in retrieving information from an API?

The default value is not displayed in the Angular dropdown menu

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

JavaScript - Utilizing jQuery to dynamically add and remove input fields

Ways to prevent recurring variables in Twitter bootstrap dialogues

The Node module's package.json does not have a main "exports" defined

What is the best way to ensure that a task is performed only once the DOM has finished loading following an AJAX request