javascript - Restructuring this JSON data to be tranformed to a barchart data

Question

    "Industries": [
        {
            "Country": null,
            "Data": [
                {
                    "Industry": "Aviation",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Algeria",
            "Data": [
                {
                    "Industry": "Tourism/Hospitality",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "American Samoa",
            "Data": [
                {
                    "Industry": "Commercial/Retail",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Angola",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 1
                },
                {
                    "Industry": "Commercial/Retail",
                    "Count": 1
                },
                {
                    "Industry": "Energy/Power Generation",
                    "Count": 1
                },
                {
                    "Industry": "Telecommunication",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Antarctica",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 1
                },
                {
                    "Industry": "Waste Management",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Australia",
            "Data": [
                {
                    "Industry": "Beauty & Wellness",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Belgium",
            "Data": [
                {
                    "Industry": "Food & Beverages",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Belize",
            "Data": [
                {
                    "Industry": "Education and Training",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Benin",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 39
                },
                {
                    "Industry": "Beauty & Wellness",
                    "Count": 2
                },
                {
                    "Industry": "Commercial/Retail",
                    "Count": 3
                },
                {
                    "Industry": "Construction",
                    "Count": 1
                },
                {
                    "Industry": "Consulting",
                    "Count": 1
                },
                {
                    "Industry": "Education and Training",
                    "Count": 2
                },
                {
                    "Industry": "Energy/Power Generation",
                    "Count": 3
                },
                {
                    "Industry": "Fashion",
                    "Count": 4
                },
                {
                    "Industry": "FMCG",
                    "Count": 2
                },
                {
                    "Industry": "Food & Beverages",
                    "Count": 6
                },
                {
                    "Industry": "Healthcare",
                    "Count": 1
                },
                {
                    "Industry": "ICT",
                    "Count": 5
                },
                {
                    "Industry": "Manufacturing",
                    "Count": 3
                },
                {
                    "Industry": "Telecommunication",
                    "Count": 1
                },
                {
                    "Industry": "Transportation",
                    "Count": 1
                },
                {
                    "Industry": "Waste Management",
                    "Count": 4
                }
            ]
        }
    ]
}

With this json data, how do i transform it to this

[
        {
            name: "Agriculture",
            data: [0,0,0,1,1,0,0,0,39]
        },
        {
            name: "Aviation",
            data: [1,0,0,0,0,0,0,0,0]
        },
        {
            name: "Beauty & Wellness",
            data: [0,0,0,0,0,1,0,0,2]
        },
        {
            name: "Commercial/Retail",
            data: [0,0,1,1,0,0,0,0,3]
        },
        {
            name: "Construction",
            data: [0,0,0,0,0,0,0,0,1]
        },
        {
            name: "Consulting",
            data: [0,0,0,0,0,0,0,0,1]
        },
        {
            name: "Education and Training",
            data: [0,0,0,0,0,0,0,1,2]
        },
        {
            name: "Energy/Power Generation",
            data: [0,0,0,1,0,0,0,0,3]
        },
        {
            name: "Fashion",
            data: [0,0,0,0,0,0,0,0,4]
        },
        {
            name: "FMCG",
            data: [0,0,0,0,0,0,0,0,2]
        },
        {
            name: "Food & Beverages",
            data: [0,0,0,0,0,0,1,0,6]
        },
        {
            name: "Healthcare",
            data: [0,0,0,0,0,0,0,0,1]
        },
        {
            name: "ICT",
            data: [0,0,0,0,0,0,0,0,5]
        },
        {
            name: "Manufacturing",
            data: [0,0,0,0,0,0,0,0,3]
        },
        {
            name: "Telecommunication",
            data: [0,0,0,1,0,0,0,0,1]
        },
        {
            name: "Tourism/Hospitality",
            data: [0,1,0,0,0,0,0,0,0]
        },
        {
            name: "Transportation",
            data: [0,0,0,0,0,0,0,0,1]
        }
        {
            name: "Waste Management",
            data: [0,0,0,0,1,0,0,0,4]
        }
  ]

I have tried the following:

let countryData = data.Industries.map(country => country.Country)
document.write(JSON.stringify(countryData))
let industryData = data.Industries.map(industry => {
    return industry.Data.map(i => {
        return i.Industry
    })
})
let flatIndustry = industryData.flat(Infinity).sort()
let filterIndustry = flatIndustry.filter((a, b) => flatIndustry.indexOf(a) === b)
let getCount = data.Industries.map(industry => {
    return industry.Data.map((i, index) => {
        return i.Count
    })
})

Note: The result industry data will be sorted and will check each country if that particular industry exist, if not either append zero(0) or prepend(0) on the sorted industry value. I am using this data in a stacked barchart

标签： javascriptarraysjsonreactjsbar-chart

Answer 1

多个 javascript 函数，如reduce和map可用于实现所需的格式。查看下面的演示：

const data = {
    "Industries": [
        {
            "Country": null,
            "Data": [
                {
                    "Industry": "Aviation",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Algeria",
            "Data": [
                {
                    "Industry": "Tourism/Hospitality",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "American Samoa",
            "Data": [
                {
                    "Industry": "Commercial/Retail",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Angola",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 1
                },
                {
                    "Industry": "Commercial/Retail",
                    "Count": 1
                },
                {
                    "Industry": "Energy/Power Generation",
                    "Count": 1
                },
                {
                    "Industry": "Telecommunication",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Antarctica",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 1
                },
                {
                    "Industry": "Waste Management",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Australia",
            "Data": [
                {
                    "Industry": "Beauty & Wellness",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Belgium",
            "Data": [
                {
                    "Industry": "Food & Beverages",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Belize",
            "Data": [
                {
                    "Industry": "Education and Training",
                    "Count": 1
                }
            ]
        },
        {
            "Country": "Benin",
            "Data": [
                {
                    "Industry": "Agriculture",
                    "Count": 39
                },
                {
                    "Industry": "Beauty & Wellness",
                    "Count": 2
                },
                {
                    "Industry": "Commercial/Retail",
                    "Count": 3
                },
                {
                    "Industry": "Construction",
                    "Count": 1
                },
                {
                    "Industry": "Consulting",
                    "Count": 1
                },
                {
                    "Industry": "Education and Training",
                    "Count": 2
                },
                {
                    "Industry": "Energy/Power Generation",
                    "Count": 3
                },
                {
                    "Industry": "Fashion",
                    "Count": 4
                },
                {
                    "Industry": "FMCG",
                    "Count": 2
                },
                {
                    "Industry": "Food & Beverages",
                    "Count": 6
                },
                {
                    "Industry": "Healthcare",
                    "Count": 1
                },
                {
                    "Industry": "ICT",
                    "Count": 5
                },
                {
                    "Industry": "Manufacturing",
                    "Count": 3
                },
                {
                    "Industry": "Telecommunication",
                    "Count": 1
                },
                {
                    "Industry": "Transportation",
                    "Count": 1
                },
                {
                    "Industry": "Waste Management",
                    "Count": 4
                }
            ]
        }
    ]
};

const industries = data.Industries.reduce((acc, cur) => {
    const industriesInCountry = cur.Data.map(x => x.Industry);
    acc.add(...industriesInCountry);
    return acc;
}, new Set());

const industriesCount = Object.values(data.Industries.reduce((acc, cur) => {
    industries.forEach(name => {
        if(!acc.hasOwnProperty(name)){
            acc[name] = { name: name, data: [] };
        }

        const countOfIndustryInCountry = cur.Data.find(x => x.Industry === name);
        acc[name].data.push(countOfIndustryInCountry === undefined ? 0 : countOfIndustryInCountry.Count);
    });

    return acc;
}, {}));

console.log(industriesCount)