在反应中将数据从 csv 转换为 json 后，根据字段对 Json 数据进行分组

Question

在我的 React 应用程序中，我正在将一个 csv 文件转换为一个 JSON 对象，以便我可以在 UI 中的 table 中显示它。但我想根据某个字段“IP 地址”对 JSON 数据进行分组。所有区域都应合并到一个“AreaList”字段，该字段是原始“区域”字段的数组。

这是我将 csv 解析为 json:

的源代码

React.useEffect(() => {
        Papa.parse(csvFile, {
            download: true,
            header: true,
            skipEmptyLines: true,
            complete: data => {
                console.log(data.data);
            }
        });
    }, []);

以上代码的控制台日志输出如下：

[
    {
        IP Address: "192.168.0.1:61000",
        area: "JA1_JA2", job: "test",
        flow: "PartsServe",
        Component: "1",
        …
    },
    {
        IP Address: "192.168.0.1:61000",
        area: "JA1_JA2",
        job:  "test1",
        flow: "PartsServe",
        Component: "1",
        …
    },
    {
        IP Address: "192.168.0.1:63000",
        area: "JA1_JA2",
        job:  "test",
        flow: "PartsServe",
        Component: "1",
        …
    },
    {
        IP Address: "192.168.0.1:63000",
        area: "JA1_JA3",
        job:  "test2",
        flow: "PartsServe",
        Component: "1",
        …
    }
]

我想根据 IP 地址字段对 json 进行分组。结果 json 应如下所示：

projects: [
    {
        IP Address: "192.168.0.1:61000",
        AreaList: [
            {
                area: "JA1_JA2",
                jobList: [
                    {job: "test", flow: "PartsServe", Component: "1"},
                    {job:  "test1", flow: "PartsServe", Component: "1"}
                ]
            },
        ]
    },
    {
        IP Address: "192.168.0.1:63000",
        AreaList: [
            {
                area: "JA1_JA2", 
                jobList: [
                    {job: "test", flow: "PartsServe", Component: "1"}, 
                    {job:  "test1", flow: "PartsServe", Component: "1"}
                ]
            },
            {
                area: "JA1_JA3",
                jobList: [
                    {job: "test", flow: "PartsServe", Component: "1"}, 
                    {job:  "test2", flow: "PartsServe", Component: "1"}
                ]
            },
        ]
    }
]

Answer 1

我可以为你形成逻辑。可能不是最优化的方法，但我匆匆做了。

const data = [
    {
        "IP Address": "192.168.0.1:61000",
        area: "JA1_JA2", job: "test",
        flow: "PartsServe",
        Component: "1",
    },
    {
        "IP Address": "192.168.0.1:61000",
        area: "JA1_JA2",
        job:  "test1",
        flow: "PartsServe",
        Component: "1",
    },
    {
        "IP Address": "192.168.0.1:63000",
        area: "JA1_JA2",
        job:  "test",
        flow: "PartsServe",
        Component: "1",
    },
    {
        "IP Address": "192.168.0.1:63000",
        area: "JA1_JA3",
        job:  "test2",
        flow: "PartsServe",
        Component: "1",
    }
];

const uniqueIPs = Array.from(new Set(data.map((item) => item["IP Address"])));

const areaList = uniqueIPs.map((ip) => {
    const currentIpData = data.filter((item) => item["IP Address"] === ip);
    const uniqueAreas = Array.from(new Set(currentIpData.map((item) => item.area)));
    return ({
        "IP Address": ip,
        AreaList: currentIpData.map((area) => {
            const currentJobData = currentIpData.filter((item) => item.area === area.area);
            const uniqueJobs = Array.from(new Set(currentJobData.map((item) => item.job)));

            return ({
                area: area.area,
                jobList: currentJobData.map((item) => ({
                    job: item.job,
                    flow: item.flow,
                    Component: item.Component
                }))
            })
        })
    })
})

console.log(areaList);

在反应中将数据从 csv 转换为 json 后，根据字段对 Json 数据进行分组

Group Json data based on a field after converting it from csv to json in react

grouping

json

reactjs

react-hooks