Question

我正在尝试学习javascript reduce和map我遇到了一些困难。

我有一个以下格式的数组。父级的 id 与子级的 location_id 相同。我需要将数组分组为嵌套格式。

arr = [
{
    "id": 4583211,
    "name": "Location 1",
    "location_id": null,
  },
  {
    "id": 7458894,
    "name": "Location 12",
    "location_id": 4583211
  },
  {
    "id": 7463953,
    "name": "Location 13",
    "location_id": 4583211
  },
{
    "id": 80302210,
    "name": "Location 121",
    "location_id": 7458894
  },
  {
    "id": 80302219,
    "name": "Location 122",
    "location_id": 7458894
  },
{
    "id": 7464314,
    "name": "Location 131",
    "location_id": 7463953
  },
{
    "id": 4583216,
    "name": "Location 2",
    "location_id": null,
  },
{
    "id": 3566353,
    "name": "Location 21",
    "location_id": 4583216
  },
]

此数组应分组为：

result = [
  {
    "id": 4583211,
    "name": "Location 1",
    "locations": [
      {
        "id": 7458894,
        "name": "Location 12",
        "locations": [
          {
            "id": 80302210,
            "name": "Location 121"
          },
          {
            "id": 80302219,
            "name": "Location 122"
          }
        ]
      },
      {
        "id": 7463953,
        "name": "Location 13",
        "locations": [
          {
            "id": 7464314,
            "name": "Location 131"
          }
        ]
      }
    ]
  },
  {
    "id": 4583216,
    "name": "Location 2",
    "locations": [
      {
        "id": 3566353,
        "name": "Location 21"
      }
    ]
  }
]

我尝试使用在SO上找到的以下方法将其分组，但结果却不同。

result = arr.reduce(function (r, a) {
        r[a.location_id] = r[a.location_id] || [];
        r[a.location_id].push(a);
        return r;
    }, Object.create(null));

Answer 1

您可以使用reduce和递归来做到这一点，只需检查parent是否等于当前元素location_id。

const data = [{"id":4583211,"name":"Location 1","location_id":null},{"id":7458894,"name":"Location 12","location_id":4583211},{"id":7463953,"name":"Location 13","location_id":4583211},{"id":80302210,"name":"Location 121","location_id":7458894},{"id":80302219,"name":"Location 122","location_id":7458894},{"id":7464314,"name":"Location 131","location_id":7463953},{"id":4583216,"name":"Location 2","location_id":null},{"id":3566353,"name":"Location 21","location_id":4583216}]

function create(data, parent = null) {
  return data.reduce((r, e) => {
    if(parent == e.location_id) {
      const o = { id: e.id, name: e.name }
      const children = create(data, e.id);
      if(children.length) o.locations = children;
      r.push(o)
    }
    return r
  }, [])
}

console.log(create(data))

分组多级对象

1 个答案: