时间戳

首页 > 解决方案 > javascript 按值聚合并在数组中获取聚合结果

javascript - javascript 按值聚合并在数组中获取聚合结果

问题描述

  data = [
    {
      "data": {
        "data": [
          {
            "Id": "47",
            "SepalLengthCm": "5.1",
            "SepalWidthCm": "3.8",
            "PetalLengthCm": "1.6",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          },
          {
            "Id": "48",
            "SepalLengthCm": "4.6",
            "SepalWidthCm": "3.2",
            "PetalLengthCm": "1.4",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "pie3d-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
    }, {
      "data": {
        "data": [
          {
            "Id": "47",
            "SepalLengthCm": "5.1",
            "SepalWidthCm": "3.8",
            "PetalLengthCm": "1.6",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          },
          {
            "Id": "48",
            "SepalLengthCm": "4.6",
            "SepalWidthCm": "3.2",
            "PetalLengthCm": "1.4",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "bar-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
    },  {
      "data": {
        "data": [
          {
            "name": "carry",
            "id": "5",
          },
          {
            "name": "ethen",
            "SepalLengthCm": "10"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "funnel-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cQ=="
    }
  ]



  output = [
    {
      "data": [
        {
          "Id": "47",
          "SepalLengthCm": "5.1",
          "SepalWidthCm": "3.8",
          "PetalLengthCm": "1.6",
          "PetalWidthCm": "0.2",
          "Species": "setosa"
        },
        {
          "Id": "48",
          "SepalLengthCm": "4.6",
          "SepalWidthCm": "3.2",
          "PetalLengthCm": "1.4",
          "PetalWidthCm": "0.2",
          "Species": "setosa"
        }
      ],
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_types": ["pie3d-chart","bar-chart"]
    }, {
      "data": {
        "data": [
          {
            "name": "carry",
            "id": "5",
          },
          {
            "name": "ethen",
            "SepalLengthCm": "10"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_types": ["funnel-chart"]
    }
  ]

嗨，我有以下数据结构，我想使用unique_datasource_token聚合chart_types ，并期望使用所有unique_datasource_token的数组中的 chart_types。

似乎数据结构很复杂，无法找到实现这一目标的方法

请帮助我以一种有效的方式来实现这一结果

标签： javascript

解决方案

您可以使用Array.prototype.reduce()和遍历您的数组。

  1. 创建一个objectwhich 成立并给出group=的值。unique_datasource_tokenproperty nameunique_datasource_token
  2. 如果property不存在，则创建一个新的并复制data,value等。添加chart_types为array. 并推动电流值i.chart_type。
  3. 如果property存在，则只需推送 current 的值i.chart_type。
  4. 输出将是一个object所以将其转换为arraywith Object.values。

var data = [{
  "data": {
    "data": [{
        "Id": "47",
        "SepalLengthCm": "5.1",
        "SepalWidthCm": "3.8",
        "PetalLengthCm": "1.6",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      },
      {
        "Id": "48",
        "SepalLengthCm": "4.6",
        "SepalWidthCm": "3.2",
        "PetalLengthCm": "1.4",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "pie3d-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
}, {
  "data": {
    "data": [{
        "Id": "47",
        "SepalLengthCm": "5.1",
        "SepalWidthCm": "3.8",
        "PetalLengthCm": "1.6",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      },
      {
        "Id": "48",
        "SepalLengthCm": "4.6",
        "SepalWidthCm": "3.2",
        "PetalLengthCm": "1.4",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "bar-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
}, {
  "data": {
    "data": [{
        "name": "carry",
        "id": "5",
      },
      {
        "name": "ethen",
        "SepalLengthCm": "10"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "funnel-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cQ=="
}];

var r = data.reduce((a, i) => {
  if (!a[i.unique_datasource_token]) {
    a[i.unique_datasource_token] = {
      data: i.data,
      value: i.value,
      category: i.category,
      unique_datasource_token: i.unique_datasource_token,
      chart_types: [i.chart_type]
    };
  } else {
    a[i.unique_datasource_token].chart_types.push(i.chart_type);
  }
  return a;
}, {});

r = Object.values(r);

console.log(r);

推荐阅读