Preparing JSON data into a JavaScript array to use in react-heatmap-grid React app

Question

I have a set of JSON objects which are served from an API into a React app. They are related to how a zone is mapped to an aisle and how many of those zones are in that aisle.

Each aisle does not necessarily contain each zone and conversely each zone is not necessarily in each aisle.

I am wanting to create a data array which is populated with a quantity associated with each of the zone/aisle combinations. I have the below which basically just outputs the quantities in each of the mapping elements:

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

However the output I require is for zeros to be added into the array if the zone is not in the aisle. For example zone AAB is not in aisle A2 so the array value at this element should be 0.

When working correctly, the data array should be 12 elements long as there are 4 aisles and 3 zones. The zeros are added as there is no aisle zone combination for 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;

I have tried using an else statement after the if statement but because the entire mappings array is being iterated through it returns 84 values in the array which is not correct.


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

else{
   data.push(0)
}

Does anybody know the work around for this please?

Thanks

score 0 · Answer 1 · answered Nov 01 '21 at 11:57

This question is not about react, but rather about data processing

You can use something like this to process data

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);

These questions may also help:
Grouping by multiple fields per object
Most efficient method to groupby on an array of objects

Preparing JSON data into a JavaScript array to use in react-heatmap-grid React app

1 Answers1