如何将数组的列从数组传递到对象字段答案

【问题标题】：how to pass column of array to Object field from an Array如何将数组的列从数组传递到对象字段
【发布时间】：2019-10-19 20:35:12
【问题描述】：

下面是我的代码，我正在尝试将值从 'dataList' 传递给 this.data 对象 'labels', 'datasets'-> data;

但是如果创建一个变量并存储值然后将其传递给标签、数据，我会得到未定义的结果。

我的问题是如何设置标签的值，dataList 数组中的数据。

    this.dataList = [['lable1', 200], ['lable2', 300], ['lable3', 500]];

//现在我想访问所有标签到标签，所有数字到数据下面而不是静态数据，我想从 dataList 中放入数据

    this.data = {
    labels: ['label1', label2, labels3],
    datasets: [
      {
        data: [200, 300, 500],
        backgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }]
  };

我想把数据放在dataList中的动态数据，而不是标签中的静态值。

【问题讨论】：

您的getEncounterDashBoard() 是一个异步方法。而是在 subscribe 回调中分配您的 this.data.labels。
没关系，我的朋友，我将数据存储在 this.datalist 中，它具有所有值。我想存储 datalist 中的一列，它应该在标签中，另一列在数据中。

标签： javascript angular typescript

【解决方案1】：

您可以简单地使用 JavaScript 的 Reduce 函数来开始工作。

Stackblitz DEMO - 您可以编辑this.dataList 变量以查看动态变化的输出

this.dataList = [['lable1', 200], ['lable2', 300], ['lable3', 500]];

this.data = {
  labels: this.dataList.reduce((result, item) => {
    result.push(item[0]);
    return result;
  }, []),
  datasets: [
    {
      data: this.dataList.reduce((result, item) => {
        result.push(item[1]);
        return result;
      }, []),
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

【讨论】：

【解决方案2】：

您必须将代码放在 .subscribe() 函数块中，因为它是异步的，您需要等待数据返回。然后，只需分配给变量标签和数据集。我这里用的是es6，你不需要。

dataList: Array<any> = [];
data: any = {}; //give data an inital value
searchCond: SearchConditions;

constructor(private apiService: ApiService) {

this.searchCond = new SearchConditions();
this.searchCond.eventType = "encounterType";

this.apiService.getEncounterDashBoard(this.searchCond)
  .subscribe(data => {
    this.dataList = data.result;
    let [labels, datasets] = this.dataList; 
    this.data = {
      labels: labels,
      datasets: datasets,
    };
  });

【讨论】：

我已经试过了，如果我把它保存在 .subscribe 中，它会给出无法读取未定义错误的属性“数据集”。
@HariU 给数据一个初始值 {}，那么你应该不会得到这个错误。请注意，由于订阅函数只会在获取数据后运行，因此任何需要使用 dataList 的函数都需要从订阅函数内部调用。我已经更新了我的答案
在标签和数据中，我想在每个数据列表中存储一个列。假设我在 dataList 中有两列。第一列数据应存储在标签中，如已显示为静态数据，第二列将用于数据。最后我的输出应该像我上面提到的静态数据。以你的方式它没有显示价值。
好的，你能更新你的问题以显示dataList的结构吗？
我刚刚更新并编辑了代码，以便您更好地理解。

【解决方案3】：

如果你想让labels 拥有与dataList 相同的元素：

labels: dataList,

如果你想避免突变：

labels: dataList.slice(),

或者：

labels: [...dataList],

【讨论】：

嗨，伙计，感谢您的回复，我在“dataList”中有两列，我想将所有第一列数据存储在标签中，第二列将存储在数据中。
然后做labels: dataList[0]。
我相信你的意思是标签：this.dataList[0]。这给了我一个 typeError。