Two map methods inside map method

June 30, 2022

In my example, I have an array of objects which I want to map to another array of objects:

Resurs.map((item) => ({
  Cen: item.Cent,
  level: [
    item.NumList.map((item) => ({
      Kom: item.Number,
      Num: item.Kor,
    })),
    item.SerList.map((item) => ({
      Kom2: item.Ser,
    })),
  ],
}));

So, I have 2 map methods inside the map method. It will return:

{
  Cen: "aaa",
  level: [
    [ // -> want to get rid of this
      {
        Kom: "aaa",
        Num: "aaa",
      },
      {
        Kom: "bbb",
        Num: "bbb",
      },
    ], // -> and this
    [ //-> and this
      { Kom2: "aaa" },
      { Kom2: "bbb" },
    ], //-> and this
  ],
};

So, both map functions need to be inside level key, but not as a list which has two lists inside, but as a list with objects.

So, I want to achieve:

{
  Cen: "aaa",
  level: [
    {
      Kom: "aaa",
      Num: "aaa",
    },
    {
      Kom: "bbb",
      Num: "bbb",
    },
    { Kom2: "aaa" },
    { Kom2: "bbb" },
  ],
};

>Solution :

You are almost there! The answer is spread operator. Just insert it in your inner map.

You can use a spread operator to expanded the arrays when you insert into level.

The spread operator can be used with an array or an object.

Example:

var a = [1, 2, 3, 4];
var b = [5, 6, 7];

var c = [a, b];   //  [[1, 2, 3, 4], [5, 6, 7]]  // This is what you are doing

Solution: 
var d = [...a, ...b];   //  [1, 2, 3, 4, 5, 6, 7]

Complete Solution:

const Resurs = [
    {
        Cent:  "centValue",
        NumList: [
            {
                Number: "numValue1",
                Kor: "KorValue1"
            },
            {
                Number: "numValue3",
                Kor: "KorValue2"
            },
            {
                Number: "numValue3",
                Kor: "KorValue3"
            }
        ],
        SerList: [
            {
                Ser: "SerValue1"
            },
            {
                Ser: "SerValue2"
            }
        ]
    }
];
const data = Resurs.map((item) => ({
  Cen: item.Cent,
  level: [
    ...item.NumList.map((item) => ({   // Just add ...
      Kom: item.Number,
      Num: item.Kor,
    })),
    ...item.SerList.map((item) => ({   // Just add ...
      Kom2: item.Ser,
    })),
  ],
}));

console.log(data);