在Tableau WDC中实现JavaScript数组从宽表转长表

问题背景 #

我通过Tableau Web Data Connector（WDC）获取到如下格式的JavaScript数组：

[{Code: "AFG", Country: "Afghanistan", 1950: 20.249, 1951: 21.352, 1952: 22.532, 1953: 23.557, 1954: 24.555}, {Code: "ALB", Country: "Albania", 1950: 8.097, 1951: 8.986, 1952: 10.058, 1953: 11.123, 1954: 12.246}]

在Tableau Desktop里呈现为宽表：

Code Country        1950    1951    1952    1953    1954
AFG  Afghanistan    20,249  21,352  22,532  23,557  24,555
ALB  Albania        8,097   8,986   10,058  11,123  12,246

由于Tableau不支持对WDC数据源做透视操作，需要把数组转成长格式，最终结构如下：

[{Code: "AFG", Country: "Afghanistan", Year: 1950, Value: 20.249}, {Code: "AFG", Country: "Afghanistan", Year: 1951, Value: 21.352}, ..., {Code: "ALB", Country: "Albania", Year: 1950, Value: 8.097}, ...]

对应Tableau里的展示效果：

Code Country        Year    Value
AFG  Afghanistan    1950    20,249
AFG  Afghanistan    1951    21,352
AFG  Afghanistan    1952    22,532
AFG  Afghanistan    1953    23,557
AFG  Afghanistan    1954    24,555
ALB  Albania        1950    8,097
ALB  Albania        1951    8,986
ALB  Albania        1952    10,058
ALB  Albania        1953    11,123
ALB  Albania        1954    12,246

实现代码 #

下面是针对该场景的转换函数，逻辑简单易懂，适合JS新手：

function meltWideData(wideData) {
  // 定义不需要拆分的固定字段
  const fixedFields = ['Code', 'Country'];
  const longData = [];

  // 遍历每一行宽表数据
  wideData.forEach(row => {
    // 提取当前行的固定字段内容
    const fixedValues = fixedFields.reduce((acc, field) => {
      acc[field] = row[field];
      return acc;
    }, {});

    // 遍历当前行所有字段，筛选出年份字段
    Object.keys(row).forEach(key => {
      if (!fixedFields.includes(key)) {
        // 构造长表的单条数据
        const longRow = {
          ...fixedValues,
          Year: parseInt(key, 10), // 将年份转为数字类型
          Value: row[key]
        };
        longData.push(longRow);
      }
    });
  });

  return longData;
}

使用方法 #

将WDC获取到的原始数组传入函数即可完成转换：

// 原始宽表数据
const originalWideData = [{Code: "AFG", Country: "Afghanistan", 1950: 20.249, 1951: 21.352, 1952: 22.532, 1953: 23.557, 1954: 24.555}, {Code: "ALB", Country: "Albania", 1950: 8.097, 1951: 8.986, 1952: 10.058, 1953: 11.123, 1954: 12.246}];

// 转成长表数据
const longTableData = meltWideData(originalWideData);

// 可打印结果测试
console.log(longTableData);

代码说明 #

1. 固定字段配置：fixedFields数组存放不需要拆分的字段，后续如果有新增固定字段，直接添加到数组即可。
2. 提取固定内容：通过reduce方法一次性提取当前行的固定字段值，避免重复处理。
3. 筛选年份字段：用Object.keys(row)获取当前行所有字段名，排除固定字段后，剩余的就是年份字段。
4. 构造长表数据：将固定字段内容与年份、对应数值组合成新对象，加入结果数组。

注意事项 #

• 如果年份字段不是纯数字格式（例如带前缀），需要调整parseInt(key, 10)的转换逻辑，或者修改年份的判断条件。
• 转换后的longTableData可直接传给Tableau WDC的数据源接口使用。

内容的提问来源于stack exchange，提问作者Coding Gene