Question

我试图在我的React应用程序中使用从axios获得的json数据用于echarts，但我不知道如何正确映射它。

我当前的代码从一组对象转换为

[
    {
        "data": "24.64",
        "timestamp": "2019-04-30T02:00:42.032Z"
    },
    {
        "data": "24.13",
        "timestamp": "2019-04-30T02:20:36.966Z"
    }
]

进入2个州

data: ["24.64","24.13"]
timestamp: ["2019-04-30T02:00:42.032Z","2019-04-30T02:20:36.966Z"]

我以后在哪里称呼他们

this.state.data
and
this.state.timestamp

但这并不能给我我想要的确切图表。

这是我当前工作代码的一部分，该代码获取并转换对象数组：

componentDidMount() {
    this.getData(); 
};

getData() {      
    axios.get('/api/records/datatime')
    .then((res) => {  
      this.setState({ 
        data: res.data.map(({ data }) => data),
        timestamp: res.data.map(({ timestamp }) => timestamp),
      });
     })   
    .catch((err) => { console.log(err); });
}

我现在需要的是在我的状态下将对象数组更改为像这样的数组数组，其中时间戳作为键，数据作为值。

chartData: 
  [
    ["2019-04-30T02:00:42.032Z","24.64"],
    ["2019-04-30T02:20:36.966Z","24.13"]
  ]

Answer 1

您可以使用Object.values()

this.setState({ 
  chartData:res.data.map(Object.values)
});

纯js中的有效代码段

const arr= [ { "data": "24.64", "timestamp": "2019-04-30T02:00:42.032Z" }, { "data": "24.13", "timestamp": "2019-04-30T02:20:36.966Z" } ]
const res = arr.map(Object.values)
console.log(res)

Answer 2

使用map和Object.values，然后使用reduce来创建对象：

const data = [{"data":"24.64","timestamp":"2019-04-30T02:00:42.032Z"},{"data":"24.13","timestamp":"2019-04-30T02:20:36.966Z"}];
const res = data.map(Object.values).reduce((acc, [d, t]) => {
  acc.data.push(d);
  acc.timestamp.push(t);
  return acc;
}, { data: [], timestamp: [] });
console.log(res)

.as-console-wrapper { max-height: 100% !important; top: auto; }

如何在ReactJS中将对象值数组映射到键值数组？

2 个答案: