Javascript 将对象数组重新构造到更深层次

我正在尝试使用基本HTML（JSX）创建一个表。每一行都需要有一个唯一的日期，然后是在这一天出售的苹果、草莓、香蕉和橙子的数量

我从API接收的数据使得创建表变得很困难，因此我需要重新构造它

const数据=[
{
id:1，
出售日期：“2020-11-14”，
水果：“苹果”，
金额：9，
},
{
id:2，
出售日期：“2020-11-14”，
水果：“草莓”，
金额：2，
},
{
id:3，
出售日期：“2020-11-13”，
水果：“苹果”，
金额：1，
},
{
id:4，
出售日期：“2020-11-13”，
水果：“橙子”，
金额：4，
},
{
id:5，
出售日期：“2020-11-13”，
水果：“香蕉”，
金额：2，
},
{
id:6，
出售日期：“2020-11-13”，
水果：“草莓”，
金额：3，
},
{
id:7，
出售日期：“2020-11-12”，
水果：“苹果”，
金额：2，
},
{
id:8，
出售日期：“2020-11-12”，
水果：“香蕉”，
金额：5，
},
{
id:9，
出售日期：“2020-11-12”，
水果：“草莓”，
金额：2，
},
{
id:10，
出售日期：“2020-11-11”，
水果：“苹果”，
金额：8，
},
{
id:11，
出售日期：“2020-11-11”，
水果：“橙子”，
金额：3，
},
];

要使其看起来像这样：

const newData={
“2020-11-14”：{香蕉：0，苹果：9，草莓：2，橙子：0}，
“2020-11-13”：{香蕉：2个，苹果：1个，草莓：3个，橙子：4个}，
“2020-11-12”：{香蕉5个，苹果2个，草莓2个，橙子0个}，
“2020-11-11”：{香蕉：0，苹果：8，草莓：0，橙子：3}，
};

这可以使用

Array.prototype.reduce来完成


const数据=[
{
id:1，
出售日期：“2020-11-14”，
水果：“苹果”，
金额：9，
},
{
id:2，
出售日期：“2020-11-14”，
水果：“草莓”，
金额：2，
},
{
id:3，
出售日期：“2020-11-13”，
水果：“苹果”，
金额：1，
},
{
id:4，
出售日期：“2020-11-13”，
水果：“橙子”，
金额：4，
},
{
id:5，
出售日期：“2020-11-13”，
水果：“香蕉”，
金额：2，
},
{
id:6，
出售日期：“2020-11-13”，
水果：“草莓”，
金额：3，
},
{
id:7，
出售日期：“2020-11-12”，
水果：“苹果”，
金额：2，
},
{
id:8，
出售日期：“2020-11-12”，
水果：“香蕉”，
金额：5，
},
{
id:9，
出售日期：“2020-11-12”，
水果：“草莓”，
金额：2，
},
{
id:10，
出售日期：“2020-11-11”，
水果：“苹果”，
金额：8，
},
{
id:11，
出售日期：“2020-11-11”，
水果：“橙子”，
金额：3，
},
];
常量输出=数据减少（（acc，cur）=>{
acc[当前出售日期]？acc[当前出售日期][当前水果]=当前金额：acc[当前出售日期]={
[当前水果]：当前数量
};
返回acc；
}, {});
控制台日志（输出）
这可以使用
数组.prototype.reduce
来完成


const数据=[
{
id:1，
出售日期：“2020-11-14”，
水果：“苹果”，
金额：9，
},
{
id:2，
出售日期：“2020-11-14”，
水果：“草莓”，
金额：2，
},
{
id:3，
出售日期：“2020-11-13”，
水果：“苹果”，
金额：1，
},
{
id:4，
出售日期：“2020-11-13”，
水果：“橙子”，
金额：4，
},
{
id:5，
出售日期：“2020-11-13”，
水果：“香蕉”，
金额：2，
},
{
id:6，
出售日期：“2020-11-13”，
水果：“草莓”，
金额：3，
},
{
id:7，
出售日期：“2020-11-12”，
水果：“苹果”，
金额：2，
},
{
id:8，
出售日期：“2020-11-12”，
水果：“香蕉”，
金额：5，
},
{
id:9，
出售日期：“2020-11-12”，
水果：“草莓”，
金额：2，
},
{
id:10，
出售日期：“2020-11-11”，
水果：“苹果”，
金额：8，
},
{
id:11，
出售日期：“2020-11-11”，
水果：“橙子”，
金额：3，
},
];
常量输出=数据减少（（acc，cur）=>{
acc[当前出售日期]？acc[当前出售日期][当前水果]=当前金额：acc[当前出售日期]={
[当前水果]：当前数量
};
返回acc；
}, {});
控制台日志（输出）您需要按部分创建新数据。首先，收集所有日期和水果，如：

const dates=[]；
常数=[]；
用于（常量数据项）{
如果（！dates.includes（data.date_sall））
日期。推送（数据。销售日期）；
如果（！fruits.includes（data.fruit））
push（data.push）；
}

然后，您可以创建newDate对象，如：

const newData=Object.fromValues(
dates.map（函数（日期）{
const froutscont=Object.fromValues(
水果。地图（功能（水果）{
返回[水果，0]；
})
});
用于（常量数据项）{
如果（item.date==日期）{
水果汤[item.fruit]+=item.amout；
}
}
返回[数据，结果]；
);
您需要按部分创建新数据。首先，收集所有日期和水果，如：

const dates=[]；
常数=[]；
用于（常量数据项）{
如果（！dates.includes（data.date_sall））
日期。推送（数据。销售日期）；
如果（！fruits.includes（data.fruit））
push（data.push）；
}

然后，您可以创建newDate对象，如：

const newData=Object.fromValues(
dates.map（函数（日期）{
const froutscont=Object.fromValues(
水果。地图（功能（水果）{
返回[水果，0]；
})
});
用于（常量数据项）{
如果（item.date==日期）{
水果汤[item.fruit]+=item.amout；
}
}
返回[数据，结果]；
);
我认为下面的解决方案更具可读性

const result = {};

data.forEach(el => {
    const keys = Object.keys(result);
    if (keys.indexOf(el.date_sold) > -1) {
        const amount = result[el.date_sold][el.fruit];
        result[el.date_sold][el.fruit] = (amount || 0) + el.amount;
    } else {
        result[el.date_sold] = {
            [el.fruit]: el.amount
        };
    }
});

我认为下面的解决方案更具可读性

const result = {};

data.forEach(el => {
    const keys = Object.keys(result);
    if (keys.indexOf(el.date_sold) > -1) {
        const amount = result[el.date_sold][el.fruit];
        result[el.date_sold][el.fruit] = (amount || 0) + el.amount;
    } else {
        result[el.date_sold] = {
            [el.fruit]: el.amount
        };
    }
});