In ReactJS is there a way to iterate through 2 arrays and combine the 2 arrays to be grouped by the-CodePudding

The title might be a little confusing, but basically I'm working on a project and it requires me to have 2 array of object lists. I have a group array and a values array, I've been looking for hours for something that might work but I haven't found anything yet!

I'm needing a direction to take these 2 lists and combine them to show some stuff for the UI, I'm using ReactJS for my frontend (if that helps) and ES6. I'll try to describe the best I can for the data I need and somehow iterate it through a list that categorize from the main group and the data that matches will be sent to an array under that group and keep going until the data belongs to another group.

groupedObjects = {
  groupI: {
    id: 1,
    name: 'GroupI',
    array: [
       {category: 'groupI', name: 'someValue1'},
       {category: 'groupI', name: 'someValue2'},
       {category: 'groupI', name: 'someValue3'},
       {category: 'groupI', name: 'someValue4'}
]},
  groupII: {
    id: 2,
    name: 'GroupII',
    array: [
       {category: 'groupII', name: 'someValue1'},
       {category: 'groupII', name: 'someValue2'},
       {category: 'groupII', name: 'someValue3'},
       {category: 'groupII', name: 'someValue4'}
]},
  groupIII: {
    id: 3,
    name: 'GroupIII',
    array: [
       {category: 'groupIII', name: 'someValue1'},
       {category: 'groupIII', name: 'someValue2'},
       {category: 'groupIII', name: 'someValue3'},
       {category: 'groupIII', name: 'someValue4'}
]}};

And then somehow iterate that on a list of tables to display to the UI showing the groupI, groupII, groupIII as separate tables in each table it has the data from the array in each object.

Edit: Here's the data I needed to combine

const groups = [
   {
      id: 1,
      name: 'GroupI'
   },
   {
      id: 2,
      name: 'GroupII'
   },
   {
      id: 3,
      name: 'GroupIII'
   },
];

const data = [
   {
      category: 'groupI',
      name: 'someValue1'
   },
   {
      category: 'groupI',
      name: 'someValue2'
   },
   {
      category: 'groupI',
      name: 'someValue3'
   },
   {
      category: 'groupI',
      name: 'someValue4'
   },
   {
      category: 'groupII',
      name: 'someValue1'
   },
   {
      category: 'groupII',
      name: 'someValue2'
   },
   {
      category: 'groupII',
      name: 'someValue3'
   },
   {
      category: 'groupII',
      name: 'someValue4'
   },
   {
      category: 'groupIII',
      name: 'someValue1'
   },
   {
      category: 'groupIII',
      name: 'someValue2'
   },
   {
      category: 'groupIII',
      name: 'someValue3'
   },
   {
      category: 'groupIII',
      name: 'someValue4'
   }
];

CodePudding user response：

Since you didn't provide examples of those two arrays you need to combine, I will make assumption about their structures and give you one example of how you should do it:

 const groups = [
  {
    id: 1,
    name: 'GroupI'
  }, {
    id: 2,
    name: 'GroupII',
  }, {
    id: 3,
    name: 'GroupIII',
  }
];

const data = [
  { category: 'groupI', name: 'someValue1' },
  { category: 'groupI', name: 'someValue2' },
  { category: 'groupI', name: 'someValue3' },
  { category: 'groupI', name: 'someValue4' },
  { category: 'groupII', name: 'someValue1' },
  { category: 'groupII', name: 'someValue2' },
  { category: 'groupII', name: 'someValue3' },
  { category: 'groupII', name: 'someValue4' },
  { category: 'groupIII', name: 'someValue1' },
  { category: 'groupIII', name: 'someValue2' },
  { category: 'groupIII', name: 'someValue3' },
  { category: 'groupIII', name: 'someValue4' }
];

let groupedData = {};

groups.forEach(g => {
  groupedData[g.name] = {
    id: g.id,
    name: g.name,
    array: data.filter(x => x.category.toLowerCase() === g.name.toLowerCase())
  }
});

console.log(groupedData); // This will give you the output you are expecting