Merging items in an array of objects that share common values

Question

Merging items in an array of objects that share common values

Displayed below is an array containing categories and the corresponding solutions they belong to. Each category is unique while solutions may repeat.

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

A new array of solution objects needs to be returned in the following format. All necessary data for this format is accessible during iteration, including index values for ids; however, there are challenges in structuring the code correctly.

const solutions = [
  {
    id: "0",
    name: "Data Solutions",
    categories: [
      {
        id: "0",
        name: "Cables",
        slug: "cables"
      },
      {
        id: "1",
        name: "Patch Leads",
        slug: "patch-leads"
      }
    ]
  },
  {
    id: "1",
    name: "Hardware",
    categories: [
      {
        id: "0",
        name: "Nails",
        slug: "nails"
      },
      {
        id: "1",
        name: "Locks",
        slug: "locks"
      },
      {
        id: "2",
        name: "Screws",
        slug: "screws"
      }
    ]
  },
  {
    id: "2",
    name: "Cabinet Solutions",
    categories: [
      {
        id: "0",
        name: "Cabinets",
        slug: "cabinets"
      },
      {
        id: "1",
        name: "Swing Frames",
        slug: "swing-frames"
      },
      {
        id: "2",
        name: "Racks",
        slug: "racks"
      }
    ]
  },
  {
    id: "3",
    name: "Fire Solutions",
    categories: [
      {
        id: "0",
        name: "Fire Cables",
        slug: "fire-cables"
      }
    ]
  }
]

javascript arrays object merge

Answer 1

Answer №1

If you want to achieve that, the reduce() method can be used. During the iteration process, check if the current item already exists and append the current category to the existing item if it does. If not, create a new item with the current category.

const categories = [ { category: 'Patch Leads', solution: 'Data Solutions' }, { category: 'Cables', solution: 'Data Solutions' }, { category: 'Nails', solution: 'Hardware' }, { category: 'Locks', solution: 'Hardware' }, { category: 'Screws', solution: 'Hardware' }, { category: 'Cabinets', solution: 'Cabinet Solutions' }, { category: 'Swing Frames', solution: 'Cabinet Solutions' }, { category: 'Racks', solution: 'Cabinet Solutions' }, { category: 'Fire Cables', solution: 'Fire Solutions' }, ];

var solutions = categories.reduce((acc, curr) => {
  let item = acc.find(item => item.name === curr.solution);

  if (item) {
    item.categories.push({
      "id": item.categories.length,
      "name": curr.category,
      "slug": curr.category.toLowerCase().replace(' ', '-')
    });
  } else {
    acc.push({
      "id": acc.length,
      "name": curr.solution,
      "categories": [{
        "id": 0,
        "name": curr.category,
        "slug": curr.category.toLowerCase().replace(' ', '-')
      }]
    });
  }

  return acc;
}, []);

console.log(solutions);

Answer 2

If you want to achieve that, the reduce() method can be used. During the iteration process, check if the current item already exists and append the current category to the existing item if it does. If not, create a new item with the current category.

const categories = [ { category: 'Patch Leads', solution: 'Data Solutions' }, { category: 'Cables', solution: 'Data Solutions' }, { category: 'Nails', solution: 'Hardware' }, { category: 'Locks', solution: 'Hardware' }, { category: 'Screws', solution: 'Hardware' }, { category: 'Cabinets', solution: 'Cabinet Solutions' }, { category: 'Swing Frames', solution: 'Cabinet Solutions' }, { category: 'Racks', solution: 'Cabinet Solutions' }, { category: 'Fire Cables', solution: 'Fire Solutions' }, ];

var solutions = categories.reduce((acc, curr) => {
  let item = acc.find(item => item.name === curr.solution);

  if (item) {
    item.categories.push({
      "id": item.categories.length,
      "name": curr.category,
      "slug": curr.category.toLowerCase().replace(' ', '-')
    });
  } else {
    acc.push({
      "id": acc.length,
      "name": curr.solution,
      "categories": [{
        "id": 0,
        "name": curr.category,
        "slug": curr.category.toLowerCase().replace(' ', '-')
      }]
    });
  }

  return acc;
}, []);

console.log(solutions);

Answer 3

Answer №2

The following code snippet showcases a process of creating an intermediate array map that correlates solutions to categories. This map is then utilized to produce the desired output format by leveraging the keys and values within the mapped Object.

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

const solutionMap = categories.reduce((acc, item) => {
 if (!acc[item.solution]) 
   acc[item.solution] = [];
 acc[item.solution].push(item.category); 
 return acc;
}, {});

const solutions = Object.entries(solutionMap).map(([key, val], id) => ({
  id,
  name: key,
  categories: val.map((category, idx) => ({ id: idx, name: category, slug: category.toLowerCase().replace(' ', '-') }))
}));

console.log(solutions);

Answer 4

The following code snippet showcases a process of creating an intermediate array map that correlates solutions to categories. This map is then utilized to produce the desired output format by leveraging the keys and values within the mapped Object.

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

const solutionMap = categories.reduce((acc, item) => {
 if (!acc[item.solution]) 
   acc[item.solution] = [];
 acc[item.solution].push(item.category); 
 return acc;
}, {});

const solutions = Object.entries(solutionMap).map(([key, val], id) => ({
  id,
  name: key,
  categories: val.map((category, idx) => ({ id: idx, name: category, slug: category.toLowerCase().replace(' ', '-') }))
}));

console.log(solutions);

Answer 5

Answer №3

To optimize object creation, consider utilizing specific classes.

const types = [
    { type: 'Phones', category: 'Electronics' },
    { type: 'Laptops', category: 'Electronics' },

    { type: 'Sunglasses', category: 'Accessories' },
    { type: 'Watches', category: 'Accessories' },

    { type: 'Chairs', category: 'Furniture' },
    { type: 'Desks', category: 'Furniture' },
];

class Type{
    constructor(id,name){
        this.id = id;
        this.name = name;
        this.label = name;
    }
}
class NewItem {
    constructor(id,name,types=[]) {
        this.id = id;
        this.name = name;
        this.types = types;
    }
}
let categories = [];

categories.push(new NewItem(0, types[0].category,[new Type(0,types[0].type)]));

let newIndex = 0;
let newId = 1;

for(index in types){
    if(categories[newIndex].name !== types[index].category){
        categories.push(new NewItem(index, types[index].category,[new Type(0,types[index].type)]));
        newIndex++;
        newId=1;
    }else{
        categories[newIndex].types.push(new Type(newId,types[index].type));
        newId++;
    }
}

Answer 6

To optimize object creation, consider utilizing specific classes.

const types = [
    { type: 'Phones', category: 'Electronics' },
    { type: 'Laptops', category: 'Electronics' },

    { type: 'Sunglasses', category: 'Accessories' },
    { type: 'Watches', category: 'Accessories' },

    { type: 'Chairs', category: 'Furniture' },
    { type: 'Desks', category: 'Furniture' },
];

class Type{
    constructor(id,name){
        this.id = id;
        this.name = name;
        this.label = name;
    }
}
class NewItem {
    constructor(id,name,types=[]) {
        this.id = id;
        this.name = name;
        this.types = types;
    }
}
let categories = [];

categories.push(new NewItem(0, types[0].category,[new Type(0,types[0].type)]));

let newIndex = 0;
let newId = 1;

for(index in types){
    if(categories[newIndex].name !== types[index].category){
        categories.push(new NewItem(index, types[index].category,[new Type(0,types[index].type)]));
        newIndex++;
        newId=1;
    }else{
        categories[newIndex].types.push(new Type(newId,types[index].type));
        newId++;
    }
}

Merging items in an array of objects that share common values

Answer №1

Answer №2

Answer №3

Similar questions

Package for validating forms in Meteor using React

Struggling to align legacy reCaptcha code

Is it possible to update state multiple times within a single function using setState?

Utilizing parentIds to construct a hierarchical array structure in PHP

Tips for detecting a new day with server-side JavaScript

How shouldjs makes value verification effortless for unordered arrays

Tips for preventing the browser from freezing when incorporating a large HTML chunk retrieved through AJAX requests

The function you are attempting to call, ReactHtmlParser, is not recognized as

Evaluating a string or object for compatibility

jQuery's Same Origin Policy compared to the Browser's Policy when using OData

Vue - Pull out several components from main file

The impact on 'int a' and 'int a[]' when altered without pointers outside of the main() function

Is it possible to utilize a for loop or a function to accomplish this task and create a concise and flexible solution for this particular array?

Guide to implementing AWS Cognito TOTP MFA functionality

Substitute the identifier with the name

Reduce the total distance between two sets of points that do not share any common points

What could be causing this JavaScript/CSS animation to only function on the initial instance and not the subsequent ones?

Why is JavaScript globally modifying the JSON object?

Adding an array into MongoDb

a smart method for retrieving elements from a JSON array