Javascript 基于多个级别以平面格式创建数组

Question

我正在尝试创建一个堆积条形图，如下例所示:http://jsfiddle.net/fct1p8j8/4/

当对数据进行硬编码时，图表本身工作得很好，一切都很好。

我正在努力弄清楚如何从我的数据库结构中获取正确格式的数据。

这是我的数据设置的示例输出:

[
  {
    "invDept": "Due Diligence",
    "programs": {
      "data": [
        {
          "program": "Brand Risk Management",
          "total": "1847"
        },
        {
          "program": "Due Diligence",
          "total": "2718"
        },
        {
          "program": "SAR",
          "total": "17858"
        }
      ]
    }
  },
  {
    "invDept": "Sanctions",
    "programs": {
      "data": [
        {
          "program": "Brand Risk Management",
          "total": "500"
        },
        {
          "program": "Due Diligence",
          "total": "2100"
        },
        {
          "program": "SAR",
          "total": "16593"
        }
      ]
    }
  }
]

x 轴将是来自对象的 invDepartment 值。系列数据是我需要制作成图表所需格式的数据。

对于每个部门，我需要数组格式的每个程序的值。

例如，品牌风险管理是计划名称，我需要从尽职调查部门和制裁获得它的值部门。

我首先执行一个基本循环来创建数组结构，如下所示:

//获取 X 轴的部门

$.each(data.data, function (key, value) {

    d = value;

    xAxis.push(value.invDept);

    // If an array for the department doesn't exist, create it now
    if (typeof res[d.invDept] == "undefined" || !(res[d.invDept] instanceof Array)) {
        res[d.invDept] = [];
    }

});

从这里我有类似的东西:

res['Due Diligence'] = []

我现在被困住了。不太确定我需要如何设置循环才能以平面格式获取此数据。

最终输出如下:

series: [{
    name: 'Brand Risk Management',
    data: [1847, 500]
}, {
    name: 'Due Diligence',
    data: [2718, 2100]
}, {
    name: 'SAR',
    data: [17858, 16593]
}]

Answer 1

使用Array.concat() , Array.map()和 spread syntax将数据展平为单个数组。

然后reduces数组为 Map将具有相同键的对象合并为所需的结果。完成后，将 Map 转换回数组 Map.values()和扩展语法。

const data = [{"invDept":"Due Diligence","programs":{"data":[{"program":"Brand Risk Management","total":"1847"},{"program":"Due Diligence","total":"2718"},{"program":"SAR","total":"17858"},{"program":"Sanctions - WLM","total":"885"}]}},{"invDept":"Sanctions","programs":{"data":[{"program":"Brand Risk Management","total":"500"},{"program":"Due Diligence","total":"2100"},{"program":"SAR","total":"16593"},{"program":"Sanctions - WLM","total":"443"}]}}]

const result = [... // spread the iterator to a new array
  // flatten the array
  [].concat(...data.map(({ programs }) => programs.data))
  // reduce the data into a map
  .reduce((r, { program: name, total }) => {
      // if key doesn't exist create the object
      r.has(name) || r.set(name, { name, data: [] }) 
      // get the object, and add the total to the data array
      r.get(name).data.push(total) 

      return r;
    }, new Map())
  .values()] // get the Map's values iterator
  
console.log(result)