将它的数组简化为更简单的映射方式

Question

我正在开发一个应用程序并已将新项目添加到我的数组中：type 和 description。

array = [
  {
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
    },
    {
    "id": 2,
    "description": "item1",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item1",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  },
]

我之前这样做是为了将其简化为更简单的映射方式：

 items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"]
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

在我做之前显示数据

const dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]

{
  Object.keys(items_dicc).map((item) => {
    return (
      <tr>
       <td>{item}</td>
       {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
      </tr>
    )
  })
}

我需要在上面添加description 元素和type.name。例如description:

description: e["description"]

要像表格一样显示元素：

ITEM	DESCRIPTION	TYPE	202001	202002
I1	item1	type1	100	200
I2	item3	type2	-	300

如何添加和显示？

编辑：console.log(items_dicc[item])

{202001: 100, 202002: 200, description: "item1", type: "type1"}
202001: 100
202002: 200
description: "item1"
type: "type1"
__proto__: Object

{202002: 300, description: "item3", type: "type2"}
202002: 300
description: "item3"
type: "type2"
__proto__: Object

Answer 1

你可以像这样在reduce方法里面添加description和type属性，

array = [
  {
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
    },
    {
    "id": 2,
    "description": "item2",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item3",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  },
]


items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"],
        'description': e['description'],
        'type': e.type?.name,
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

console.log(items);

要在表格中添加描述和名称，

const dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]

{
  Object.keys(items_dicc).map((item) => {
    return (
      <tr>
       <td>{item}</td>
       <td>{items_dicc[item]?.description}</td>
       <td>{items_dicc[item]?.type}</td>
       {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
      </tr>
    )
  })
}

我从昨天开始就看到您对这些类型的表格提出的问题。你已经发布了几个类似的问题。我建议您阅读一些文章并了解 JS array 方法的工作原理，而不是在 SO 中提出增量问题。 在 SO 中提问可能会暂时解决您的问题，但从长远来看，您会受到影响，因为您似乎无法掌握这些事情的工作原理。

Answer 2

您可以像这样简化您的解决方案。

const array = [{
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
  },
  {
    "id": 2,
    "description": "item2",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item3",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  }
]

const result = array.map(item => {
    return Object.keys(item).reduce((a, c) => {
        if (c === "date") {
            a[item[c].name] = item.price; 
        } else if (c !== "price" && c !== "id") {
            a[c] = (typeof item[c] === "object") ? item[c].name : item[c];
        }
        return a;
    }, {})
});

console.log(result);