Multidimention Array combine with one array in javascript with specific key

Question

I have one array like below

[
 {
"__typename": "ConfigurableProduct",
"uid": "MzY3",
"name": "AISLING BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "uid": "NTI=",
    "name": "Product 1"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 2"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 3"
   }
  ]
 },
{
"__typename": "ConfigurableProduct",
"uid": "MzI4",
"name": "CERYS BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 4"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 5"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 6"
   }
 ]
}
]

I want single array with data which is contain crosssell_products array it means I want below format

 "crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "uid": "NTI=",
    "name": "Product 1"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 2"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 3"
  },
   {
    "__typename": "ConfigurableProduct",
    "name": "Product 4"
  },
   {
    "__typename": "ConfigurableProduct",
    "name": "Product 5"
  },
   {
    "__typename": "ConfigurableProduct",
    "name": "Product 6"
  },
]

I tried below code but not working

 let aa = getRelatedData?.products?.items.reduce(function (a, b) {
  return a.concat(b);
}, []);

Selaka Nanayakkara · Accepted Answer · 2023-11-10 06:04:22Z

1

You can use flatMap() Operator in javascript accomplish a flatten array.

Refer official documentation here.

var arr = [
 {
"__typename": "ConfigurableProduct",
"uid": "MzY3",
"name": "AISLING BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "uid": "NTI=",
    "name": "Product 1"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 2"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 3"
   }
  ]
 },
{
"__typename": "ConfigurableProduct",
"uid": "MzI4",
"name": "CERYS BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 4"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 5"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 6"
   }
 ]
}
];


const results = arr.flatMap(v => v.crosssell_products);
console.log(results)

edited Nov 10, 2023 at 6:04

answered Nov 10, 2023 at 5:55

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

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

1 Comment

DecPK Over a year ago

what is the difference between the first and your answer?

Silviu Burcea · Accepted Answer · 2023-11-10 06:05:36Z

1

You need to use flatMap. map will return an array of arrays, hence the need to use flatMap instead.

const res = getRelatedData.flatMap(el => el.crosssell_products);
console.log(res);

You can also use your method of iterating and reducing:

const res = getRelatedData.reduce((acc, el) => acc.concat(el.crosssell_products), []);
console.log(res);

But flatMap is much more concise and illustrate the intent better.

const getRelatedData = [
  {
    "__typename": "ConfigurableProduct",
    "uid": "MzY3",
    "name": "AISLING BODYSUIT",
    "crosssell_products": [
      {
        "__typename": "ConfigurableProduct",
        "uid": "NTI=",
        "name": "Product 1"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 2"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 3"
       }
      ]
     },
    {
    "__typename": "ConfigurableProduct",
    "uid": "MzI4",
    "name": "CERYS BODYSUIT",
    "crosssell_products": [
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 4"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 5"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 6"
       }
     ]
  }
];
const res = getRelatedData.flatMap(el => el.crosssell_products);
console.log(res);

edited Nov 10, 2023 at 6:05

answered Nov 10, 2023 at 5:50

Silviu Burcea

5,3672 gold badges32 silver badges46 bronze badges

2 Comments

DecPK Over a year ago

It is always preferred to add the code required code snippet first and then runnable code.

Silviu Burcea Over a year ago

Thank you, @DecPK, appreciated the MDN reference, too. Good edits.

Jahedul Hoque · Accepted Answer · 2023-11-10 06:07:27Z

Try Array.flatMap() as below

const flattenedCrossSellProducts = products.flatMap(product => product?.crosssell_products || []);
console.log(flattenedCrossSellProducts);

This will not fail, even if the crosssell_products not exist in the array or undefined.

const products = [
  {
    "__typename": "ConfigurableProduct",
    "uid": "MzY3",
    "name": "AISLING BODYSUIT",
    "crosssell_products": [
      {
        "__typename": "ConfigurableProduct",
        "uid": "NTI=",
        "name": "Product 1"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 2"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 3"
      }
    ]
  },
  {
    "__typename": "ConfigurableProduct",
    "uid": "MzI4",
    "name": "CERYS BODYSUIT",
    "crosssell_products": [
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 4"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 5"
      },
      {
        "__typename": "ConfigurableProduct",
        "name": "Product 6"
      }
    ]
  }
];

// Use flatMap to extract and flatten the crosssell_products arrays
const flattenedCrossSellProducts = products.flatMap(product => product?.crosssell_products || []);

console.log(flattenedCrossSellProducts);

Keyboard Corporation · Accepted Answer · 2023-11-10 06:57:04Z

0

You can use the map to create a new array that contains only the crosssell_products arrays from each object in the original array. Then, concat it to combine these arrays into a single array and assign combined array to the crosssell_products property of a new object.

let originalArray = [
 {
"__typename": "ConfigurableProduct",
"uid": "MzY3",
"name": "AISLING BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "uid": "NTI=",
    "name": "Product 1"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 2"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 3"
   }
  ]
 },
{
"__typename": "ConfigurableProduct",
"uid": "MzI4",
"name": "CERYS BODYSUIT",
"crosssell_products": [
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 4"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 5"
  },
  {
    "__typename": "ConfigurableProduct",
    "name": "Product 6"
   }
 ]
}
]

let crosssellProductsArrays = originalArray.map(item => item.crosssell_products);
let combinedArray = [].concat(...crosssellProductsArrays);
let result = {
 "crosssell_products": combinedArray
};
console.log(result);

answered Nov 10, 2023 at 6:57

Keyboard Corporation

2,8881 gold badge5 silver badges22 bronze badges

1 Comment

Silviu Burcea Over a year ago

Flatmap does that in one go.

Collectives™ on Stack Overflow

Multidimention Array combine with one array in javascript with specific key

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related