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);
}, []);

Answer 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)

Answer 2

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);

Answer 3

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);

Answer 4

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);