时间戳

首页 > 解决方案 > 将 JSON 数据准备到 JavaScript 数组中以在 react-heatmap-grid React 应用程序中使用

javascript - 将 JSON 数据准备到 JavaScript 数组中以在 react-heatmap-grid React 应用程序中使用

问题描述

我有一组 JSON 对象，它们从 API 提供给 React 应用程序。它们与区域如何映射到通道以及该通道中有多少区域有关。

每个过道不一定包含每个区域，相反每个区域不一定在每个过道中。

我想创建一个数据数组，其中填充了与每个区域/过道组合相关的数量。我有以下基本上只是输出每个映射元素中的数量：

[23、12、53、64、41、5、9]

但是，如果区域不在过道中，我需要的输出是将零添加到数组中。例如，区域 AAB 不在通道 A2 中，因此该元素的数组值应为 0。

正常工作时，数据数组应该是 12 个元素，只要有 4 个通道和 3 个区域。添加零是因为没有 A2/AAB、A3/AAA、A3/AAC、A4/AAA、A4/AAB 的过道区域组合

[23、12、53、64、0、41、0、5、0、0、0、9]

import React, { useState, useEffect } from 'react';
import HeatMap from "react-heatmap-grid";

function VolumeHeatmap(props){

    let zones = [];
    let aisles = [];
    let data = [];
    
    let mappings = [ 
        {"aisle":"A1", "zone":"AAA", "quantity":"23"},
        {"aisle":"A1", "zone":"AAB", "quantity":"12"},
        {"aisle":"A1", "zone":"AAC", "quantity":"53"}, 
        {"aisle":"A2", "zone":"AAA", "quantity":"64"}, 
        {"aisle":"A2", "zone":"AAC", "quantity":"41"}, 
        {"aisle":"A3", "zone":"AAB", "quantity":"5"}, 
        {"aisle":"A4", "zone":"AAC", "quantity":"9"}
    ]
    
    function removeDuplicates(data){
        return data.filter((value, index) => data.indexOf(value) === index);
    }

    return (
        <div>
            {
                mappings && mappings.map(maps => {
                    aisles.push(maps.aisle)
                    zones.push(maps.zone)
                }),

                aisles = removeDuplicates(aisles),
                zones = removeDuplicates(zones),


                aisles.forEach(function(aisle, i, arr){            
                    zones.forEach(function(zn, i, arr){
                        mappings.forEach(function(mapFig, i, arr){
                            if(mapFig.aisle.includes(aisle) && mapFig.zone.includes(zn)){
                                data.push(mapFig.quantity)
                            }  
                        }) 
                    })
                }),
                console.log(data)
            }
        </div>
    )

}

export default VolumeHeatmap;

我尝试在 if 语句之后使用 else 语句，但因为整个映射数组正在迭代，它返回数组中的 84 个值，这是不正确的。


if(mapFig.aisle.includes(aisle) && mapFig.zone.includes(zn)){
                                data.push(mapFig.quantity)
                            } 

else{
   data.push(0)
}

请问有人知道解决这个问题吗？

谢谢

标签： javascriptarraysreactjsjson

解决方案

这个问题不是关于反应，而是关于数据处理

您可以使用这样的东西来处理数据

let groupData = (arr) => {
    let zones = {};
    let aisles = {};
    let zoneCounter = 0;
    let aisleCounter = 0;
    arr.forEach((map) => {
        if (!zones.hasOwnProperty(map['zone'])) zones[map['zone']] = zoneCounter++;
        if (!aisles.hasOwnProperty(map['aisle'])) aisles[map['aisle']] = aisleCounter++;
    });

    let res = Array(zoneCounter * aisleCounter).fill(0);
    arr.forEach((map) => {
        res[aisles[map['aisle']] * (aisleCounter -1) + zones[map['zone']]] += +map.quantity;
    });
    return res;
};

let data = groupData(mappings);

这些问题也可能有帮助：
按每个对象的多个字段分组
对对象数组进行分组的最有效方法

推荐阅读