使用 lodash 从 json 地图中创建两级地图

Question

我有一个 json 列表，我正在尝试用两个键重新组合此地图中的对象。目前我只使用 lodash groupBy 通过一个键成功分组，但我无法找到正确的方法来创建 row 键并将大小/数量分组到这个新数组中。我可以在我的代码中使用 ES6 或 lodash

const colorsMap= _.groupBy(colors, 'Id');

我的初始 json 看起来像这样：

colors =  [
{
    "Id": "1",
    "color": "red",
    "size": "10"
    "QTY": "2000"
    "ref": "tr"
},
{
    "Id": "1",
    "color": "red",
    "size": "25"
    "QTY": "3000"
    "ref": "tr"
},
{
    "Id": "1",
    "color": "blue",
    "size": "15"
    "QTY": "2050"
    "ref": "gt",
},
{
    "Id": "2",
    "color": "red",
    "size": "18"
    "QTY": "2010"
    "ref": "tt"
},
]

我正在尝试拥有这样的东西

 [
 "1": [
   {
     "Id": "1",
     "color": "red",
     "row": [
          {
            "size": "10"
            "QTY": "2000"
          },
          {
            "size": "25"
            "QTY": "3000"
          },
          {
            "size": "15"
            "QTY": "0"
          }
      ],
     "ref": "tr"
    },
    {
    "Id": "1",
    "color": "blue",
     "row": [
          {
            "size": "10"
            "QTY": "0"
          },
          {
            "size": "25"
            "QTY": "0"
          },
          {
            "size": "15"
            "QTY": "2050"
          }
      ],
    "ref": "gt",
  }
 ],
 "2": [
   {
     "Id": "2",
     "color": "red",
     "row": [
          {
            "size": "18"
            "QTY": "2010"
          }
      ],
     "ref": "tt"
   }
  ]
]

Answer 1

按id对颜色分组后，再按颜色分组，将第二组的值映射到你需要的对象上：

const colors =  [{"Id":"1","color":"red","size":"10","QTY":"2000","ref":"tr"},{"Id":"1","color":"red","size":"25","QTY":"3000","ref":"tr"},{"Id":"1","color":"blue","size":"15","QTY":"2050","ref":"gt"},{"Id":"2","color":"red","size":"18","QTY":"2010","ref":"tt"}];

const result = _(colors)
  .groupBy('Id') // group by id
  .mapValues((values) => _(values) // map the values
    .groupBy('color') // group by color
    .mapValues((v) => ({ // map the resulting arrays
      /* get the id and color from the 1st item in the array */
      id: v[0].Id,
      color: v[0].color,
      rows: v.map(({ size, QTY }) => ({ // map all elements to row objects
        size,
        QTY
      }))
    }))
     .value())
  .value();

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>