【问题标题】:Programmatically change to another key in object以编程方式更改为对象中的另一个键
【发布时间】:2019-10-19 20:22:58
【问题描述】:

我正在尝试为 Chart.js 准备数据,因此我必须以编程方式更改对象键。我发现这个硬编码版本有效。 `

fetch('http://...)
        .then (results =>{
            return results.json();
        }).then(data => {
            console.log(data);


        var utplockadData = {
            datasets: [
            ]
        };


        for(var i=1; i<Object.keys(data[0][0]).length; i++){
            utplockadData.datasets[i] = {label: Object.keys(data[0][0])[i], data: [], pointRadius: 1 ,fill: false, borderColor: "black"};
        }
        console.log(utplockadData);



        for (var i=1; i<data[0].length; i++){
            utplockadData.datasets[1].data[i] = {x: data[0][i].timestamp, y: data[0][i].airTemperature};
            utplockadData.datasets[2].data[i] = {x: data[0][i].timestamp, y: data[0][i].heaterTemperature};
        }
        console.log(utplockadData);
})

预期结果:

datasets: Array(3)
1:
borderColor: "black"
data: Array(1441)
[1 … 100]
1: {x: "2019-05-01 00:01:00", y: 4.2}
2: {x: "2019-05-01 00:02:09", y: 4.1}
3: {x: "2019-05-01 00:03:00", y: 4.1}
4: {x: "2019-05-01 00:04:09", y: 4.1}...

但是,如果我将一个包含地址的数组添加到键中并更改循环,如下所示:

var enArray = [data[0][i].airTemperature, data[0][i].heaterTemperature];

for (var i=1; i<data[0].length; i++){
            utplockadData.datasets[1].data[i] = {x: data[0][i].timestamp, y: enArray[0]};
            utplockadData.datasets[2].data[i] = {x: data[0][i].timestamp, y: enArray[1]};

}

结果是这样的,所有键的值都一样:

非预期结果:

datasets: Array(3)
1:
borderColor: "black"
data: Array(1441)
[1 … 100]
1: {x: "2019-05-01 00:01:00", y: 4.1}
2: {x: "2019-05-01 00:02:09", y: 4.1}
3: {x: "2019-05-01 00:03:00", y: 4.1}
4: {x: "2019-05-01 00:04:09", y: 4.1}
5: {x: "2019-05-01 00:05:00", y: 4.1}
6: {x: "2019-05-01 00:06:00", y: 4.1}
7: {x: "2019-05-01 00:07:00", y: 4.1}...

我不知道这里发生了什么。如何在不将它们全部添加到 for 循环的情况下访问 airTemperature 和 heatTemperature 的值?

更新: 从后端添加示例数据。

[

    [
        {timestamp: '2019-05-01 01:38:00',
            airTemperature: 3.5,
            heaterTemperature: 2.6 },

        {timestamp: '2019-05-01 01:39:00',
            airTemperature: 3.5,
            heaterTemperature: 2.6 },
    ],

        "text"

]

【问题讨论】:

  • 您能否提供一个获取数据时的示例?
  • 首先,什么是enArray?其次,你的 for 循环是空的。你想在这里做什么?
  • 请创建一个minimal reproducible example,其中包含 JSON 格式的输入和预期输出

标签: javascript node.js reactjs object chart.js


【解决方案1】:

看起来你的 enArray 不是你想象的那样......

var enArray = [data[0][i].airTemperature, data[0][i].heaterTemperature];

由于您的 i 是单个值,因此您的 enArray 将是一个包含两个值的单个平面数组,即 [4.1, 4.2]。这些在您的新循环中被反复使用。

如果您仍然遇到问题,我建议您将其剥离回最简单的示例,您可以将其创建为 codepen 或类似的示例。仅此一项可能会引导您找到解决方案,但如果不是这样,其他人将更有可能提供帮助。

【讨论】:

  • 看起来我从第一个 for 循环中得到了它的价值。将 var 更改为 let 可以解决该问题。但它并没有解决问题,因为它无法编译。
  • 你想达到什么目的?
  • 我的后端根据用户的选择从数据库中返回不同数量的列。例如,heaterTemperature 是一列。对循环中的所有列进行硬编码很容易。事实上,我有一个可行的例子,但我需要一种方法来避免硬编码,因为选择的数量会非常大。
  • 抱歉,我很难理解你想要做什么。我建议将其剥离回最简单的示例,您可以将其创建为 codepen 或类似的示例。仅此一项可能会引导您找到解决方案,但如果不是这样,其他人将更有可能提供帮助。
  • 我按照您的建议找到了解决方案。如果其他人在这里结束,可能不清楚应该做什么,我建议你也尽量减少 Codepen 中的问题。但首先,休息一下。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-26
  • 2012-01-12
  • 1970-01-01
  • 2014-01-04
  • 2010-09-15
  • 1970-01-01
相关资源
最近更新 更多