我正在尝试在使用高图表(https://api.highcharts.com/highcharts/)的react js中构建饼图,仅接受以下格式的饼图数据格式(或者我错了:这里的样本小提琴:https://jsfiddle.net/react_user1/e9cbsrdL/1/
data: [
{name: 'abc', y: 10},
{name: 'def', y: 90}
]
我从API获得的数据看起来像这样:
const counts:[
{
"id": "all",
"type": "all",
"count": 1403
},
{
"id": "bad",
"type": "bad",
"count": 0
},
{
"id": "failed",
"category": false,
"type": "failed",
"count": 58
},
{
"id": "changed",
"category": true,
"type": "changed",
"count": 123
}
所以我想在这里实现三件事:
1. Remove the first {}, with the "id": "all"
2. Rename the key: "id" to name & "count" to y
3. Remove the keys: "type" & "category" & their data
感谢您提供的任何帮助,即使是可以帮助的部分答案也将不胜感激。
我认为您可以使用Array.prototype.filter()
和Array.prototype.filter()
组合。
使用Array.prototype.map()
,您可以删除不需要的值-在您的情况下为Array.prototype.map()
-然后使用filter()
,您可以为数组创建一个新结构。
从文档-上面提到的链接:
all
方法创建一个新数组,其中所有元素都通过了由提供的函数实现的测试。
map()
方法创建一个新数组,其中填充了在调用数组中每个元素上调用提供的函数的结果。
就像这样:
filter()
我希望这会有所帮助!
尝试一下
map()
这将呈现Array项目的列表,并且我们添加了将要删除数组的图像,十字图像将出现在数组的每个元素之后]
const counts = [
{
"id": "all",
"type": "all",
"count": 1403
},
{
"id": "bad",
"type": "bad",
"count": 0
},
{
"id": "failed",
"category": false,
"type": "failed",
"count": 58
},
{
"id": "changed",
"category": true,
"type": "changed",
"count": 123
}
];
const result = counts.filter(f => f.id !== 'all')
.map(e => {
return {
name: e.id,
y: e.count,
}
});
console.log(result);
此方法将删除数组对象。
希望它有助于消除疑惑。