如何重命名和删除数组中的多个键？答案

【问题标题】：How do I rename & delete multiple keys in an array?如何重命名和删除数组中的多个键？
【发布时间】：2020-01-03 12:15:44
【问题描述】：

我正在尝试在使用 highcharts (https://api.highcharts.com/highcharts/) 的 react js 中构建一个饼图，它只接受以下饼图数据格式（或者我错了）：Sample Fiddle here：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

感谢您提供的任何帮助，即使是可以提供帮助的部分答案也将不胜感激。

【问题讨论】：

标签： javascript arrays reactjs charts highcharts

【解决方案1】：

我认为你可以使用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);

我希望这会有所帮助！

【讨论】：

更新在原小提琴https://jsfiddle.net/9361zgmh/

【解决方案2】：

您还可以将数据提供为数组数组：

series: [{
    data: (() => counts.map(
        item => [item.id, item.count]
    ))()
}]

现场演示： https://jsfiddle.net/BlackLabel/op4s13dm/

【讨论】：

【解决方案3】：

试试这个

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

索引值是索引值。这将呈现一个数组项目列表，我们添加一个将被按下以删除数组的图像，交叉图像将出现在数组的每个元素之后

  removePeople(Arrayelement) {
var array = [...this.state.Arrayelement];
var index = array.indexOf(Arrayelement);
if (index !== -1) {
  array.splice(index, 1);
  this.setState({Arrayelement: array});
}  }

此方法将删除数组对象。

希望对您有所帮助。如有疑问，请随意

【讨论】：