I need to combine all objects from an array element into one new array of objects

Question

I have a nested array which has property called "options". The options property is an array of objects, and now each object has it's own property fields, which is also an array of objects.

So from every option in options array I need to get the option fields, and place them all in one new array.

I will post an image how my array looks like as it might be easier to understand how it looks. Here is the array image.

Now I have tried mapping through them all and then getting the fields but in my way it returns the array but with every fields object, but I want it to be returned as each field inside fields should be a new array property.

const obj = {
  key: 'clothes',
  label: 'Clothes',
  options: [
    {
      key: 'base-layers',
      label: 'base-layers',
      fields: [{ key: 'brand', label: 'brand' }, { key: 'size', label: 'Size' }],
    },
    {
      key: 'front-layers',
      label: 'front-layers',
      fields: [{ key: 'gender', label: 'Gender' }, { key: 'condition', label: 'Condition' }],
    },
  ],
};

const getFields = obj.options.map(a => a.map(f => f.fields));

const final = getFields.reduce((r, c) => Object.assign(r, c), {}));

So each field inside fields object should be it's own property in new array of objects.

I would really appriciate the help!

what should be your expected result? Please add in the code itself? — DecPK
– DecPK, Commented Sep 20, 2021 at 15:08

Chris · Accepted Answer · 2021-09-20 15:27:26Z

1

You can use a single reduce function to iterate over each option and combine the fields collection.

const obj = {
  key: 'clothes',
  label: 'Clothes',
  options: [
    {
      key: 'base-layers',
      label: 'base-layers',
      fields: [{ key: 'brand', label: 'brand' }, { key: 'size', label: 'Size' }, { key: 'condition', label: 'Condition' }],
    },
    {
      key: 'front-layers',
      label: 'front-layers',
      fields: [{ key: 'gender', label: 'Gender' }, { key: 'condition', label: 'Condition' }],
    },
  ],
};

const allFields = obj.options.reduce((fields, option) => [...fields, ...option.fields], []);

console.log(allFields);


// Combine all fields without duplications (not optimized)

const allFieldsUnique = obj.options.reduce((fields, option) => {
  return [...fields, ...option.fields.filter(a => !fields.some(b => b.key === a.key))];
}, []);

console.log(allFieldsUnique);

edited Sep 20, 2021 at 15:27

answered Sep 20, 2021 at 15:09

Chris

6,6911 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aleksa Prebiracevic Over a year ago

I'll mark this as answer, works like a charm! Thanks! Could you help me in how can I make this new array have only unique objects, so if there is two items inside with key 'brand' how can I keep just one and so on?

Chris Over a year ago

Nice! I've added a second example that filters out duplicate fields.

Aleksa Prebiracevic Over a year ago

Thanks so much Chris!

Ori Drori · Accepted Answer · 2021-09-20 15:10:05Z

0

Use Array.flatMap() to get an array by plucking the fields from each option.

If you want an object, map the fields to an array of [key, value] pairs, and convert to an object with Object.fromEntries():

const obj = {"key":"clothes","label":"Clothes","options":[{"key":"base-layers","label":"base-layers","fields":[{"key":"brand","label":"Brand"},{"key":"size","label":"Size"}]},{"key":"front-layers","label":"front-layers","fields":[{"key":"gender","label":"Gender"},{"key":"condition","label":"Condition"}]}]};

const arr = obj.options.flatMap(option => option.fields)

console.log(arr);

const object = Object.fromEntries(obj.options.flatMap(option =>
  option.fields.map(({ key, label }) => [key, label])
));

console.log(object);

answered Sep 20, 2021 at 15:10

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

2 Comments

Aleksa Prebiracevic Over a year ago

Thanks for the help, your solution seems really good even tho I went with the upper one as it came first. Thanks again!!

Chris Over a year ago

Without the unique filter, I think I like flatMap more as it is much shorter than reduce.

Collectives™ on Stack Overflow

I need to combine all objects from an array element into one new array of objects

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related