JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

JavaScript

let _groups=[];
const groupNames = ["1", "1-3", "4-10", "11-30", "31"];
const a={
	"1100":[],
  2700:[]
}
const data =[
  {
    "CONSIGNEE": "1100",
    "GAPGROUP": "1",
    "Counts": 257
  },
  {
    "CONSIGNEE": "1100",
    "GAPGROUP": "11-30",
    "Counts": 12
  },
  {
    "CONSIGNEE": "1100",
    "GAPGROUP": "1-3",
    "Counts": 4
  },
  {
    "CONSIGNEE": "1100",
    "GAPGROUP": "4-10",
    "Counts": 32
  },
  {
    "CONSIGNEE": "2700",
    "GAPGROUP": "1",
    "Counts": 151
  },
  {
    "CONSIGNEE": "2700",
    "GAPGROUP": "11-30",
    "Counts": 15
  },
  {
    "CONSIGNEE": "2700",
    "GAPGROUP": "1-3",
    "Counts": 61
  },
  {
    "CONSIGNEE": "2700",
    "GAPGROUP": "4-10",
    "Counts": 94
  },
  {
    "CONSIGNEE": "3000",
    "GAPGROUP": "1",
    "Counts": 556
  },
  {
    "CONSIGNEE": "3000",
    "GAPGROUP": "11-30",
    "Counts": 55
  },
  {
    "CONSIGNEE": "3000",
    "GAPGROUP": "1-3",
    "Counts": 469
  },
  {
    "CONSIGNEE": "3000",
    "GAPGROUP": "4-10",
    "Counts": 518
  },
  {
    "CONSIGNEE": "30CS",
    "GAPGROUP": "1",
    "Counts": 2
  },
  {
    "CONSIGNEE": "30FM",
    "GAPGROUP": "1",
    "Counts": 2
  },
  {
    "CONSIGNEE": "30FM",
    "GAPGROUP": "1-3",
    "Counts": 2
  },
  {
    "CONSIGNEE": "30FM",
    "GAPGROUP": "4-10",
    "Counts": 1
  },
  {
    "CONSIGNEE": "4200",
    "GAPGROUP": "1",
    "Counts": 139
  },
  {
    "CONSIGNEE": "4200",
    "GAPGROUP": "11-30",
    "Counts": 20
  },
  {
    "CONSIGNEE": "4200",
    "GAPGROUP": "1-3",
    "Counts": 14
  },
  {
    "CONSIGNEE": "4200",
    "GAPGROUP": "4-10",
    "Counts": 17
  },
  {
    "CONSIGNEE": "42CS",
    "GAPGROUP": "1",
    "Counts": 4
  },
  {
    "CONSIGNEE": "42CS",
    "GAPGROUP": "11-30",
    "Counts": 2
  }
]
function groupByConsignee(data) {
	return data.reduce((acc,item)=>{
  	if (acc[item.CONSIGNEE] == null) {
    	acc[item.CONSIGNEE]=getDefaultValue(item.CONSIGNEE)
    } 
    const defaultItem =...