javascript - 重构此 JSON 数据以转换为条形图数据

标签 javascript arrays json reactjs bar-chart

    "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
                }
            ]
        }
    ]
}

有了这个 json 数据,我如何将其转换为这个

[
        {
            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]
        }
  ]

我尝试过以下方法:

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

注意:将对结果行业数据进行排序,并检查每个国家/地区是否存在该特定行业,如果不存在,则在排序的行业值上附加零 (0) 或前置 (0)。 我在堆积条形图中使用这些数据

最佳答案

可以使用多个 JavaScript 函数(例如 reducemap)来实现所需的格式。查看下面的演示:

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)

关于javascript - 重构此 JSON 数据以转换为条形图数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59920042/

相关文章:

javascript - 是否可以在 Zapier 代码中启动服务器

javascript - iframe - 阻止它下载任何东西

C++。提取数组的第 3 个字并打印其 Ascii 码和字符值

java - JSON 与 Jackson - 每个对象可序列化,一起异常(exception)

jquery - Flask-Restful API 和 JSON 问题中的 Unicode

javascript - 如何访问每个 JSON 对象的属性?

javascript - 在动态创建的元素上动态创建 onclick 事件

Javascript Array.sort 实现?

javascript - 将 php 数组传输到 javascript 时出错

python - json() 方法和 json.loads() 有什么区别