【问题标题】:Restructuring this JSON data to be tranformed to a barchart data重构此 JSON 数据以转换为条形图数据
【发布时间】:2020-01-26 15:55:36
【问题描述】:
    "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)。 我在堆积条形图中使用这些数据

【问题讨论】:

  • 请分享您到目前为止尝试过的代码。
  • 欢迎来到 Stack Overflow!请使用tour(您将获得徽章!)并通读help center,尤其是How do I ask a good question? 您最好的选择是进行研究,search 以获取有关 SO 的相关主题,然后试一试. 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境,请发布您的尝试minimal reproducible example,并具体说明您遇到的问题。人们会很乐意提供帮助。
  • @TravelingTechGuy 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 }) })

标签: javascript arrays json reactjs bar-chart


【解决方案1】:

reducemap 等多个 javascript 函数可用于实现所需的格式。查看下面的演示:

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)

【讨论】:

  • 谢谢。它工作,但我希望它排序。我该怎么做?
  • 哪一部分需要排序? dataindustriesCount 数组中的值?这在图表中是否重要? @OlatunjiAbayomi
  • 不过没关系。只是想是否应该对行业进行分类但没有必要。谢谢@MaartenDev
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-27
  • 2019-07-13
  • 1970-01-01
  • 2021-06-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多