JSFiddle - React, Tailwind, and code Playground
JavaScript
const raw = [{
"device_info": {
"device_id": "598abf4b1d41c8084d367508",
"name": "Cam01",
"serial_no": "00E0B4141D35",
"entrance_name": "South Gate"
},
"age_data": [{
"age_range": "0-20",
"total_count": 26,
"male_count": 13,
"female_count": 13
}, {
"age_range": "21-30",
"total_count": 922,
"male_count": 452,
"female_count": 470
}, {
"age_range": "31-40",
"total_count": 226,
"male_count": 184,
"female_count": 42
}, {
"age_range": "41-50",
"total_count": 13,
"male_count": 1,
"female_count": 12
}, {
"age_range": "51-0",
"total_count": 7,
"male_count": 1,
"female_count": 6
}]
}, {
"device_info": {
"device_id": "598d6cf56803fa66068b4567",
"name": "Cam02",
"serial_no": "00E0B413FE4D",
"entrance_name": "North Gate3"
},
"age_data": [{
"age_range": "0-20",
"total_count": 3,
"male_count": 1,
"female_count": 2
}, {
"age_range": "21-30",
"total_count": 90,
"male_count": 58,
"female_count": 32
}, {
"age_range": "31-40",
"total_count": 46,
"male_count": 32,
"female_count": 14
}, {
"age_range": "41-50",
"total_count": 11,
"male_count": 1,
"female_count": 10
}, {
"age_range": "51-0",
"total_count": 4,
"male_count": 1,
"female_count": 3
}]
}]
const temp = {
"female": [],
"male": []
};
let total_male_count = 0,
total_female_count = 0
raw.forEach(obj => {
obj.age_data.forEach(obj2 => {
total_male_count += obj2.male_count
total_female_count += obj2.female_count
})
})
const prepare_femaleObj = raw.map((obj, i) => {
const female_count = obj.age_data.reduce((accum, obj2) => {
if(obj2.female_count) return accum + obj2.female_count
}, 0)
const percentage = female_count / total_female_count * 100
return { id: ++i, camera: obj.device_info.name + ' - ' + obj.device_info.entrance_name, percentage }
})
const prepare_maleObj =...