英文:
How do I rename & delete multiple keys in an array?
问题
以下是翻译好的部分：
我正在尝试在React.js中构建一个使用Highcharts（https://api.highcharts.com/highcharts/）的饼图，它仅接受以下格式的饼图数据（或者我可能是错的）：示例Fiddle在这里：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. 删除第一个{}，其中包含"id": "all"
2. 将键“id”重命名为“name”和“count”重命名为“y”
3. 删除键“type”和“category”及其数据
感谢您提供的任何帮助，即使是可以帮助的部分答案也会感激不尽。
英文:
I am trying to build a pie chart in react js which uses highcharts (https://api.highcharts.com/highcharts/) is accepting only the following format for pie chart data (or maybe I'm wrong): Sample Fiddle here: https://jsfiddle.net/react_user1/e9cbsrdL/1/
data: [
{name: 'abc', y: 10},
{name: 'def', y: 90}
]
The data I get from my API looks something like this:
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
}
So I am trying to achieve three things here:
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
Thanks for any help you could provide, even a partial answer that can help would be appreciated.
答案1
得分: 5
我认为你可以使用Array.prototype.filter()和Array.prototype.map()的组合。
使用filter()，你可以移除你不需要的值 - 在你的情况下是all，然后使用map()，你可以为数组创建一个新的结构。
从上面提到的文档链接中：
filter()方法创建一个新数组，其中包含通过提供的函数实施的测试的所有元素。
map()方法创建一个新数组，其中包含在调用数组中的每个元素上调用提供的函数的结果。
就像这样：
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 => ({ name: e.id, y: e.count }));
console.log(result);
希望这有所帮助！
英文:
I think you can use Array.prototype.filter() and Array.prototype.map() combination.
With filter() you can remove the value what you don't need - in your case all - then with map() you can create a new structure for you array.
From the documentations - link mentioned above:
> The filter() method creates a new array with all elements that pass the test implemented by the provided function.
>
> The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Just like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 => ({ name: e.id, y: e.count }));
console.log(result);
<!-- end snippet -->
I hope this helps!
答案2
得分: 1
你可以将数据以数组的形式提供：
series: [{
data: (() => counts.map(
item => [item.id, item.count]
))()
}]
在线演示: https://jsfiddle.net/BlackLabel/op4s13dm/
英文:
You can also provide data as an array of arrays:
series: [{
data: (() => counts.map(
item => [item.id, item.count]
))()
}]
Live demo: https://jsfiddle.net/BlackLabel/op4s13dm/
答案3
得分: 0
尝试这个
renderarrayobjects = () => {
return this.state.arrayname.map((Arrayelement, Indexvalue) => {
return (
<View style={styles.btnColor}>
<Text style={styles.tagtext}>{Arrayelement}</Text>
<TouchableOpacity
Indexvalue={Indexvalue}
onPress={() => {
this.remove(Arrayelement);
}}>
<Image style={styles.editskill} source={deletarray} />
</TouchableOpacity>
</View>
);
});
};
索引值是Index value。
这将呈现一个Array项目的列表，我们添加了一个图像，按下图像将删除Array，交叉图像将出现在数组的每个元素之后。
removePeople(Arrayelement) {
var array = [...this.state.Arrayelement];
var index = array.indexOf(Arrayelement);
if (index !== -1) {
array.splice(index, 1);
this.setState({Arrayelement: array});
}
}
这个方法将删除Array对象。
希望有所帮助，如有疑问，请随时提问。
<details>
<summary>英文:</summary>
try this
renderarrayobjects = () => {
return this.state.arrayname.map((Arrayelement, Indexvalue) => {
return (
<View style={styles.btnColor}>
<Text style={styles.tagtext}>{Arrayelement}</Text>
<TouchableOpacity
Indexvalue={Indexvalue}
onPress={() => {
this.remove(Arrayelement);
}}>
<Image style={styles.editskill} source={deletarray} />
</TouchableOpacity>
</View>
);
}); };
The index value is the Index value.
this will render a list of Array items and we add an image that will be pressed to delete array the cross image will appear after every element of an array
removePeople(Arrayelement) {
var array = [...this.state.Arrayelement];
var index = array.indexOf(Arrayelement);
if (index !== -1) {
array.splice(index, 1);
this.setState({Arrayelement: array});
} }
this method will delete array objects.
Hope it helps .feel free for doubts
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论