简体   繁体   中英

Two map methods inside map method

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

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

Don't create the outer array in the first place:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM