将它的数组减少到更简单的映射方式

如何解决将它的数组减少到更简单的映射方式

我正在开发一个应用程序，并向我的数组添加了新项：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,"date": {
      "id": 2,"name": "202002"
    },"price": 200
  },{
    "id": 3,"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"]

要显示表格中的元素：

项目	描述	类型	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

解决方法

你可以像这样在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"
    },"price": 200
  },{
    "id": 3,"description": "item3","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 中询问现在可能会解决您的问题，但从长远来看，您会受苦，因为您似乎无法掌握这些事情的运作方式。

,

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

const array = [{
    "id": 1,"price": 100
  },"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);